VUEJS
De wikiserver
La revisió el 11:19, 11 juny 2019 per Jnoguera (Discussió | contribucions) (Es crea la pàgina amb «<source lang="javascript"> <body> <div id="el"> <h1> {{mensaje}}</h1> //podemos ver </div> </body> <script src="https...».)
<body>
<div id="el">
<h1> {{mensaje}}</h1> //podemos ver
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script> //CDN
<script>
new Vue({
el: '#el', //hace referencia al elemento id= el
data: {
mensaje: "resultado" //datos, hace referencia dentro de elemento #el {{mensaje}}
}
})
</script>
<body>
<div id="el">
<h1 v-show="mensaje.length > 2">Ejemplo <span v-text="mensaje"> {{mensaje}}</span></h1> //al recargar la pagina, se puede ver {{mensaje}} para evitar esto se usa la directiva v-text
<input type="text" class="text" v-model="mensaje">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#el',
data: {
mensaje: "resultado"
}
})
</script>
<body>
<div id="el">
<h1>Hola <span v-text="mensaje"> </span></h1> //muestra "Hola" y luego en función del texto del input va rellenando
<input type="text" class="text" v-model="mensaje">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#el',
data: {
mensaje: "resultado"
}
})
</script>
<body>
<div id="el">
<h1 v-show="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1> //si el mensaje es mayor que 2 muestra en caso contrario hace un display:none en css
<input type="text" class="text" v-model="mensaje">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#el',
data: {
mensaje: "resultado"
}
})
</script>
<body>
<div id="el">
<h1 v-if="mensaje.length > 2">Hola <span v-text="mensaje"> </span></h1> //en vez de v-show podemos usar v-if
<h1 v-else>otra</h1>
<input type="text" class="text" v-model="mensaje">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#el',
data: {
mensaje: "resultado"
}
})
</script>
