这几个指令与javascrpit的if判断有些相似这些指令可以根据表达式的布尔值在dom中渲染或者销毁元素或组件
例子
<body>
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click="btn1">+</button>
<button @click="btn2">-</button>
<h2 v-if="aa">bbb</h2> //当v-if布尔值为true时候显示bbb
<h2 v-else>v-if是假显示</h2> //否则当为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>
v-if和v-show的区别
他们都是在为true时候显示但是v-if在false时候是删除这行代码,在true时再创建这行代码
而v-show在false时添加属性display:none,并不删除。所哟当多次显示消失时用推荐
v-show而一次时候用v-if。