Diferència entre revisions de la pàgina «VUEJS»
De wikiserver
| Línia 378: | Línia 378: | ||
</script> | </script> | ||
</source> | </source> | ||
| + | DIRECTIVA COMPUTED. | ||
| − | + | DIRECTIVA V-BIND -> PARA ACTIVAR CLASES | |
<source lang="javascript"> | <source lang="javascript"> | ||
<body> | <body> | ||
Revisió del 00:27, 13 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><div id="el">
<ul>
<!-- <li v-text="profesores[0]"></li>-->
<li v-for="profesor in profesores">
<span v-text="profesor.nombre"></span>
<small v-if="profesor.activo">-Activo</small>
<small v-else>-NO está</small>
</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",
activo: true
},
{
nombre: "Albert Canela",
activo: true
},
{
nombre: "Alex Salinas",
activo: false
}
]
}
})
</script>
//en Consola del navegador->
// variable.profesores[0].nombre ="Pepe"
// variable.profesores.push({nombre:"Joan Comas,"activo:true"})EVENTOS y FUNCIONES
<body>
<div id="el">
<input type="text" v-model="mensaje">
<h1 v-text="mensaje"></h1>
<!-- <button @click="mensaje=mensaje.split('').reverse('').join('')">BOTON</button> <!-- @click es abreviación de v-on:click -->
<button @click="invertir">INVERTIR</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#el',
data: {
mensaje: " ",
profesores: [{
nombre: "Julio Noguera",
activo: true
},
{
nombre: "Albert Canela",
activo: true
},
{
nombre: "Alex Salinas",
activo: false
}
]
},
methods: {
invertir: function () {
this.mensaje = this.mensaje.split('').reverse('').join('');
}
}
})
</script>BOTÓN- AÑADIR LISTA
<body>
<div id="el">
<ul>
<!-- <li v-text="profesores[0]"></li>-->
<li v-for="profesor in profesores">
<span v-text="profesor.nombre"></span>
<small v-if="profesor.activo">-Activo</small>
<small v-else>-NO está</small>
</li>
<input v-on:keyup.13="anadir" type="text" v-model="profe" > //el 13 es enter en ascii
<!-- <input v-on:keyup.enter="anadir" type="text" v-model="profe" > -->
<!-- <input type="text" v-model="profe"> -->
<!-- <button @click="anadir">+ añadir</button>-->
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#el',
data: {
profe: "",
profesores: [{
nombre: "Julio Noguera",
activo: true
},
{
nombre: "Albert Canela",
activo: true
},
{
nombre: "Alex Salinas",
activo: false
}
]
},
methods: {
anadir: function () {
this.profesores.push({
nombre: this.profe,
activo: false
});
}
}
})
</script>
<body>
<div class="container">
<div id="elemento">
<ul>
<li v-for="profe in profesores">
<span v-text="profe.nombre"></span>
<span @click="profe.activo=false" v-if="profe.activo" class="glyphicon glyphicon-check"></span>
<span @click="profe.activo=true" v-else class="glyphicon glyphicon-unchecked"></span>
</li>
</ul>
<pre>
{{$data}}
</pre>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#elemento',
data: {
profe: "",
profesores: [{
nombre: "Julio Noguera",
activo: true
},
{
nombre: "Albert Canela",
activo: true
},
{
nombre: "Alex Salinas",
activo: false
}
]
}
})
</script>DIRECTIVA COMPUTED.
DIRECTIVA V-BIND -> PARA ACTIVAR CLASES
<body>
<div class="container">
<div id="elemento">
<ul>
<!--<span v-bind:class=['primer','segundo','tercero']; //en el caso de querer añadir varias clases-->
<li v-for="tarea in tareas">
<span v-text="tarea.nombre" @click="tarea.completo=!tarea.completo" // cambia de true a false y viceversa
v-bind:class="{ //activas la clases
'glyphicon': true,
'glyphicon-check':tarea.completo,
'glyphicon-unchecked': ! tarea.completo
}"></span>
</li>
</ul>
<pre>
{{$data}}
</pre>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var variable = new Vue({
el: '#elemento',
data: {
tareas: [{
nombre: "Estudiar",
completo: true
},
{
nombre: "Repasar",
completo: true
},
{
nombre: "Examinar",
completo: false
}
]
}
})
</script>
