Diferència entre revisions de la pàgina «VUEJS»
De wikiserver
| Línia 153: | Línia 153: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| + | <body> | ||
| + | <div id="el"> | ||
| + | <ul> | ||
| + | <!-- <li v-text="profesores[0]"></li>--> | ||
| + | <li v-for="profesor in profesores" v-text="profesor.nombre"></li> | ||
| + | </ul> | ||
| + | </div> | ||
| + | </body> | ||
| + | <script src="https://cdn.jsdelivr.net/npm/vue"></script> | ||
| + | <script> | ||
| + | var variable = new Vue({ | ||
| + | el: '#el', | ||
| + | data: { | ||
| + | profesores: [ | ||
| + | {nombre:"Julio Noguera"}, | ||
| + | {nombre: "Albert Canela"}, | ||
| + | {nombre: "Alex Salinas"} | ||
| + | |||
| + | ] | ||
| + | } | ||
| + | }) | ||
| + | </script> | ||
</source> | </source> | ||
Revisió del 20:27, 11 juny 2019
v-text: para mostrar texto y que no parpadee v-show: para mostrar u ocultar el elemento en función de su valor. v-show="true" es igual v-show="mensaje" v-if y v-else:
<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>
BUCLES
<body>
<div id="el">
<ul>
<!-- <li v-text="profesores[0]"></li>-->
<li v-for="profesor in profesores" v-text="profesor"></li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#el',
data: {
profesores: [
"Julio Noguera",
"Albert Canela",
"Alex Salinas"
]
}
})
</script>
<body>
<div id="el">
<ul>
<!-- <li v-text="profesores[0]"></li>-->
<li v-for="profesor in profesores" v-text="profesor.nombre"></li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#el',
data: {
profesores: [
{nombre:"Julio Noguera"},
{nombre: "Albert Canela"},
{nombre: "Alex Salinas"}
]
}
})
</script>
