通过一个案例来寻找v-if和v-show的异同：
说明：
- el（即element的缩写），它指定vm实例对象将要控制的区域，(本例为id="app"的模块。)
- data 是个对象，指定了控制区域内要用到的数据。
- methods 虽然有s后缀，但是它代表对象，在此部分自定义方法。
- 在VM实例中，如果要访问data上的数据，或者要访问 methods中的方法，必须要在前面加 this。
<body>
<div id="app">
<input type="button" @click="toggle" value="显示/隐藏">
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>
</div>
<script>
let vm=new Vue({
el:'#app',
data:{
flag:true,
},
methods:{
toggle(){
this.flag=!this.flag;
// 也可直接在button 中写@click="this.flag=!this.flag"
},
}
})
</script>
</body>
处于显示状态的效果图如下：
显示状态时查看控制台如下：
处于隐藏状态的效果图如下：
文本被隐藏，查看控制台效果如下：
=》我们可以发现对于v-show指令，元素隐藏时，只是增加了display:none的样式，而 v-if 指令则直接通过把该行删除来实现了隐藏效果。
结论：
v-if和v-show的相同点：
- 都能够实现指定内容的显示和隐藏操作的效果
v-if和v-show的不同点：
- v-if在每次完成显示和隐藏功能时，需要不断的在dom树上完成节点的创建和删除操作
- v-show则直接通过修改display样式的属性值来完成。
v-if和v-show的使用场景总结：
- 当一个元素会被频繁的显示和影藏时，使用v-show。
- 当元素在响应式网页的操作过程中，根据不同用户的需求，可能永远不会被显示或被隐藏，则选择使用v-if。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
