La directiva v-else-if es una directiva de Vue.js que se usa para alternar la visualización de la propiedad CSS de un elemento dependiendo de una condición cuando la condición if no se cumple. Primero, crearemos un elemento div con id como aplicación y aplicaremos la directiva v-else-if 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-if="data"
Parámetros: esta función acepta un solo parámetro que es un dato o una condición.
Ejemplo 1: este ejemplo usa Vue.js para mostrar un elemento con v-else-if usando condiciones aritméticas.
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else-if 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-if directive
</b>
</div>
<div id="canvas" style=
"border:1px solid #000000;
width: 600px;height: 200px;">
<div id="app">
<h2 v-if="data > 50">
data is greater than 50
</h2>
<h2 v-else-if="data < 50">
data is smaller than 50
</h2>
<h2 v-else>
data is equal to 50
</h2>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
data: 40
}
})
</script>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo usa Vue.js para mostrar un elemento con v-else-if usando booleanos.
<!DOCTYPE html>
<html>
<head>
<title>
VueJS | v-else-if 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-if 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-if="!data">
else-if is executed
</h2>
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
data: false
}
})
</script>
</body>
</html>
Producción:
