v-show 和 v-if 都可以控制dom元素的显示和隐藏,那么具体区别是什么呢?
话不多说,先来段代码对比一下,就会更容易明白,希望能对你有所帮助哦
1、先来看 v-show
<div id="app">
<input type="button" value="显示/隐藏" v-on:click="fn()">
<p v-show="isShow" v-bind:style="bgc">我是一个p标签</p>
</div>
<script src="./js/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
isShow: true, // 默认显示
bgc: "background-color:red" //设置背景色为红色
},
methods: {
fn: function() {
//显示状态下,点击按钮后进行隐藏,反之显示
this.isShow = !this.isShow;
}
}
})
</script>
我们来看一下执行结果
通过上面两张效果图我们可以得出结论:v-show利用的是display属性来控制DOM元素的显示和隐藏!!!
2、接下来我们一起看看v-if的执行结果
<p v-if=“isShow” v-bind:style=“bgc”>我是一个p标签</p>
把上面的代码里的v-show改成v-if就可以了
明显可以看出,用v-if来控制显示和隐藏,实际是进行DOM的增加和删除操作,会影响DOM树结构
应用场景:
需要频繁切换显示隐藏的情况下,使用v-show;切换不频繁的用v-if