Vue显示隐藏（v-show，v-if）v-show="show"
Vue显示隐藏（v-show，v-if）
1.v-show
把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 id="box">
<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 id="box"> <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 较好。
参考文章：https://www.jianshu.com/p/b9623407da6f