1、v-show
先看代码：
<body>
<div id="app">
<div v-show="isShow">{{name}}</div>
<button @click="handleClick">切换</button>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
isShow:true,
name:"Sansa Stark"
},
methods:{
handleClick () {
this.isShow = !this.isShow
}
}
})
</script>
</body>
这里在data里设置isShow，默认值设为true。
打开控制台，效果图如下：
v-show.png
当点击“切换”按钮时，效果图如下：
v-show2.png
2、v-if
先看代码：
<div id="app">
<div v-if="isShow">{{name}}</div>
<button @click="handleClick">切换</button>
</div>
这里把v-show改成v-if。
打开控制台，看页面初始渲染时的效果图：
v-if1.png
当点击“切换”按钮时，效果图如下：
v-if2.png
v-show小结：
1、v-show仅仅控制元素的显示方式，通过display属性的none
2、当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销
v-if小结：
1、v-if会控制这个DOM节点的存在与否。
2、如果在运行时条件很少改变，则使用 v-if 较好。
网友评论