怎样理解 Vue 中的 v-if 和 v-show ?
2024-09-05 09:06:04
1. v-if 实现了真正的 条件渲染, 条件为真时, 节点被创建, 相应的监听函数也会生效, 条件为假时, 节点被销毁, 触发事件监听函数不会生效. 而 v-show 只是使用了 display:none , 其元素节点始终在 dom 树中, 不会被销毁和重建. 如下所示, 按钮 A 使用了 v-if , 点击以后 dom 树中的相应节点会被创建或销毁, 而 按钮 B 使用了 v-show , 它的所控制的 html 元素始终在 dom 树中, 不会被销毁.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head>
<body>
<div id="app">
<input type="button" value="A" v-on:click="clickA" />
<p v-if="a">{{ a }}</p>
<input type="button" value="B" v-on:click="clickB" />
<p v-show="b">{{ b }}</p>
</div>
<script>
var vApp = new Vue({
el: "#app",
data: {
a: true,
b: true
},
methods: {
// 点击相应的按钮, 改变a, b的值, 观察v-if 和 v-show的区别.
clickA: function () { this.$data.a = !this.$data.a },
clickB: function () { this.$data.b = !this.$data.b },
}
});
</script>
</body>
</html>
2. 我们观察一下他们在浏览器中的执行情况, 在不点击时, 两个 p 标签 都是正常显示的; 两个都点击后, 在页面上就消失了, 不过使用了 v-if 的标签消失得更"彻底". 使用了 v-show 的标签仍在, 但会多一个属性: style="display: none".
最新文章
- socket.io与redis构建实时推送
- SQL Server 2014如何提升非在线的在线操作
- information_schema系列之字符集校验(CHARACTER_SETS,COLLATIONS,COLLATION_CHARACTER_SET_APPLICABILITY)
- 你不得不知道的HTML5的新型标签
- oracle sqlplus常用命令
- box2dweb之关节joint(连接器)
- RabbitMQ在CentOS上的简单安装配置
- Android判断网络是否已经连接
- lex&;yacc2
- 分布式文件系统glusterfs安装步骤
- mybatis的decimal精度缺失
- zencart 自定义函数
- Easy UI下拉列表默认选中(多行)与为文本框赋值
- JS如何判断滚动条是否滚到底部
- TypeScript之interface初探
- 谈谈我们对userAgent的看法,为什么爬虫中需要userAgent?
- WPF自定义行为Behavior,实现双击控件复制文本
- sicily 1051. Biker&#39;s Trip Odomete
- Django之MTV
- python3----datetime模块分析