一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
<body> <div class="box"> <!-- v-if 等于true的时候 会把这个元素彻底移除掉--> <h1 v-if="flog">这里显示的是v-if绑定的数据</h1> <!-- v-show 等于true的时候，会把这个元素设置成display：none--> <h1 v-show="flog">这里显示的是v-show绑定的数据</h1> <input type="button" value="切换按钮" @click ="btnClick"> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'.box', data:{ flog:true }, methods:{ btnClick:function(){ this.flog=!this.flog } } }); </script>
经典案例 购入车选项 使用v-if 和v-else 或者 v-else if
<div class="box">
<button @click="handleClick()">Click</button>
<div v-if="isCheck">空空如也</div>
<ul v-else>
<li v-for="item in gouru" >{{item}}</li>
</ul>
</div>
<script src="vue-2.4.0.js"></script>
<script>
var vm= new Vue({
el:'.box',
data:{
isCheck:true,
gouru:['11111','22222','33333']
},
methods: {
handleClick:function () {
this.isCheck=! this.isCheck
},
},
})
</script>
</body>
</html>