Conditional rendering vue js 3

 

Conditional rendering:

===================================================================

//v-show just 1 condition e use kora jay.

//v-if and v-show same kaj kore, but v-show use korle main class ta hide na hoyei display content hide hoye jay.

//html

 <div id="app">

     

      <button @click="toggle">show / hide</button>

      <div class="card" v-if="show"></div>

    </div>

//css

.card{

    width: 200px;

    height: 200px;

    border: 2px solid blue;

}

//js

var app = Vue.createApp({

    data(){

        return{ 

            show: false

            

        };

        

    },

    methods: {

        toggle(){

            this.show = !this.show;

        }

    }    

});

app.mount('#app');

//<div class="card" v-show="show"></div>

......................................