9 Program to demonstrate If-Else-If Condition's in VueJS ~ Coding Atharva

Program:

index.html:

<!DOCTYPE html>

<html>



<body>

    <div id="ad">



        <h1 v-if="gate"> Gate Open </h1>

        <h1 v-else-if="!gate"> Gate Closed </h1>



        <button v-on:click="gate=!gate">Open/Close</button>

    </div>



    <div style="margin-top:500px;"></div>

    <link rel="stylesheet" type="text/css" href="./style.css">

    <script src="https://unpkg.com/vue"></script>

    <script type="text/javascript" src="./index.js"> </script>



</body>



</html>

index.js:

var app = new Vue({

    el: '#ad',

    data: {

        gate: false,

    },

});

Output:

9 Program to demonstrate If-Else-If Condition's in VueJS

Related Post