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

De wikiserver
Dreceres ràpides: navegació, cerca
(Es crea la pàgina amb «<source lang="javascript"> <body> <div id="el"> <h1> {{mensaje}}</h1> //podemos ver </div> </body> <script src="https...».)
 
Línia 1: Línia 1:
 +
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:
 +
 +
 
<source lang="javascript">
 
<source lang="javascript">
 
<body>
 
<body>
Línia 115: Línia 120:
 
</source>
 
</source>
  
 +
 +
BUCLES
  
 
<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"></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>
 
</source>
 
</source>
  

Revisió del 10:54, 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>