v-else-if Directive in Vue.js

25 Jun, 2020
v-else-if directive is a Vue.js directive used to toggle the display CSS property of an element depending on a condition when the if condition is not satisfied. First, we will create a div element with id as app and let’s apply the v-else-if directive to an element with data. Now we will create this data by initializing a Vue instance with the data attribute containing the value.
Syntax:
v-else-if="data"
Parameters: This function accepts a single parameter which is data or a condition.
Example 1: This example uses Vue.js to show an element with v-else-if using arithmetic conditions.
<!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>            
Output:
Example 2: This example uses Vue.js to show an element with v-else-if using Booleans.
<!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>                   
Output:
Vue.JS
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?