Vue显示隐藏，v-show，v-if
1.v-show
直接上示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<button @click="toshow()">显示/隐藏</button>
<p>v-show：<span v-show="show">{{text}}</span></p>
</div>
</body>
<script type="text/javascript" charset="utf-8">
new Vue({
el: "#box",
data: {
text: "我要显示呀",
show: false
},
methods: {
toshow: function() {
this.show = !this.show;
}
}
})
</script>
</html>v-show为false运行以后在浏览器看到的是这样的
<div >
<button>显示/隐藏</button>
<p>v-show：<span >我要显示呀</span></p>
</div>v-show 的元素会始终被渲染并保存在 dom 中，它只是简单的切换 css 的 dispaly 属性。
2.v-if
把v-show改为v-if再看：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<button @click="toshow()">显示/隐藏</button>
<p>v-show：<span v-if="show">{{text}}</span></p>
</div>
</body>
<script type="text/javascript" charset="utf-8">
new Vue({
el: "#box",
data: {
text: "我要显示呀",
show: false
},
methods: {
toshow: function() {
this.show = !this.show;
}
}
})
</script>
</html>v-if为false运行以后在浏览器看到的是这样的
<div >
<button>显示/隐藏</button>
<p>v-show：
<!---->
</p>
</div>v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
3.总结
v-show总结
1、v-show仅仅控制元素的显示方式，通过display属性的none
2、当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销
v-if总结
1、v-if会控制这个DOM节点的存在与否。
2、如果在运行时条件很少改变，则使用 v-if 较好。
- 上一篇 »vue中css动画原理
- 下一篇 »vue2.0修饰符sync用法
