La directiva v-else es una directiva de Vue.js que se utiliza para alternar la visualización de la propiedad CSS de un elemento solo cuando no se cumple la condición if. Primero, crearemos un elemento div con id como aplicación y aplicaremos la directiva v-else a un elemento con datos. Ahora crearemos estos datos inicializando una instancia de Vue con el atributo de datos que contiene el valor.
Sintaxis:
v-else
Parámetros: esta directiva no acepta ningún parámetro.
Ejemplo 1: este ejemplo usa VueJS para mostrar un elemento con v-else usando condiciones aritméticas.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else directive
</title>
<!-- Load Vuejs -->
<script src=
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
VueJS | v-else directive
</b>
</div>
<div id="canvas" style="border:1px solid #000000;
width: 600px;height: 200px;">
<div id="app">
<h2 v-if="a > 10">a is greater than 10</h2>
<h2 v-else>a is smaller than or equal to 10</h2>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
a: 9
}
})
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa VueJS para mostrar un elemento con v-else usando booleanos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else directive
</title>
<!-- Load Vuejs -->
<script src=
"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
VueJS | v-else directive
</b>
</div>
<div id="canvas" style="border:1px solid #000000;
width: 600px;height: 200px;">
<div id="app">
<h2 v-if="data">if is executed</h2>
<h2 v-else>else is executed</h2>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
data: false
}
})
</script>
</body>
</html>
Producción:
