These directives are similar to javascrpit if directives that can render or destroy elements or components in the DOM based on the Boolean value of an expression
example
<body>
<div id=”app”>
<h2>{{counter}}</h2>
<button v-on:click=”btn1″>+</button>
<button @click=”btn2″>-</button>
<h2 v-if=”aa”> BBB </h2> // BBB is displayed when v-if is true
<h2 v-else> V-if is false display </h2> // otherwise display this content when false
<h2 v-else-if=””></h2>
</div>
<script>
const app =new Vue({
el:’#app’,
data:{ counter:0, message:’aaa’, aa:true, bb:false },
methods:{
btn1(){ this.counter++ },
btn2(abc){ this.counter–, console.log(‘+++++’,event) }
}
})
</script>
</body>
Difference between V-if and V-show
They are both displayed when true but v-if deletes the line when false and creates the line when true
When false, v-show adds display: None and does not remove it. Use the recommendation when multiple displays disappear
V-show and v-if are used once.