Vue.js Condicionales

Condicionales

v-if

Condicionales con la directiva v-if:

Directiva v-if

Uso de la directiva v-if en elementos y en template:

<div id="app"> <p v-if="seen">Ahora me ves.</p> <template v-if="ok"> <h1>Ejemplo</h1> <p>Lo que se aprende no es solo tecnología, sino también un sueño.</p> <p>Jajaja, ¡escribir cansa!</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>

Pruébalo »

Aquí, la directiva v-if decide si se inserta el elemento p según el valor de la expresión seen (true o false).

En plantillas de cadena, como Handlebars, tendríamos que escribir un bloque condicional así:

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-else

Se puede usar la directiva v-else para añadir un bloque «else» a v-if:

Directiva v-else

Genera un número aleatorio, determina si es mayor que 0.5 y luego muestra el mensaje correspondiente:

<div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> </div> <script> new Vue({ el: '#app' }) </script>

Pruébalo »

v-else-if

v-else-if se agregó en la versión 2.1.0. Como su nombre indica, se usa como un bloque else-if de v-if. Se puede usar en cadena varias veces:

Directiva v-else

Evalúa el valor de la variable type:

<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>

Pruébalo »

v-else y v-else-if deben ir después de v-if o v-else-if.

v-show

También podemos usar la directiva v-show para mostrar elementos según una condición:

Directiva v-show

<h1 v-show="ok">Hello!</h1>

Pruébalo »
Otras extensiones