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

De wikiserver
Dreceres ràpides: navegació, cerca
Línia 179: Línia 179:
  
 
<source lang="javascript">
 
<source lang="javascript">
 +
    <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"
 
</source>
 
</source>
  

Revisió del 21:05, 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>
<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"
Obtingut de «http://wikiserver.infomerce.es/index.php?title=VUEJS&oldid=11910»