v-show和v-if的使用
v-show和v-if都能够控制dom节点的出现与消失,那么它们怎样使用呢?它俩又有什么区别呢?
首先我们使用v-if来看一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
show: ''
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
如上,当我们打开页面时效果如下图,可以看到root里面没有任何元素
当我们点击toggle切换时,再来观察元素的变化,可以看到root里面多了一个div标签,并且里面有hello world
从上面的代码以及运行结果可以看到当我们使用v-if指令的时候,它的值为空时,页面上的元素消失,并且没有任何的元素存在;它的值非空时,页面上的元素和值是存在的。
现在我们使用v-show来看一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
show: ''
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
我们打开页面和控制台如下,会发现存放hello world这个div标签被添加上了display: none这个css样式的
当我们点击toggle切换时,再来观察元素的变化,可以看到div里面的display: none被去除了
从上面的代码以及运行结果可以看到当我们使用v-show指令的时候,它的值为空时,页面上的元素消失,不过它的标签元素仍然存在,只是被添加上了css的隐藏样式;它的值为非空时,页面上的元素和值是存在的。
总结
相同点:v-if和v-show可以动态的控制dom元素的显示与隐藏
不同点:v-if隐藏元素是直接将节点元素删除,而v-show隐藏则是为该元素添加了display: none的属性,dom节点仍然存在
- 还没有人评论,欢迎说说您的想法!