Diferència entre revisions de la pàgina «VUEJS»

De wikiserver
Dreceres ràpides: navegació, cerca
Línia 268: Línia 268:
 
</script>
 
</script>
 
</source>
 
</source>
 +
 +
BOTÓN- AÑADIR LISTA
 +
<source lang="javascript">
 +
<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>
 +
</source>
 +
 +
 +
 +
<source lang="javascript">
 +
 +
</source>
 +
  
 
<source lang="javascript">
 
<source lang="javascript">
  
 
</source>
 
</source>

Revisió del 09:07, 12 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>



Obtingut de «http://wikiserver.infomerce.es/index.php?title=VUEJS&oldid=11913»