Vue中 v-if 和 v-show 的区别
Vue中 v-if 和 v-show 的区别
Li_XiaoJin
发布于 2022-06-10 19:34:58
发布于 2022-06-10 19:34:58
做新加坡的工单的时候刚好用到，记录一下。
需求是加一个国内号码的输入框，当选择 30 及以上的套餐才展示，刚开始我是用的 display:none ，但是发现第一次时不起作用，然后发现用的是 v-if，因为初始化的时候是 false，没有渲染进去，所以没生效。后来比对了下 v-if 和 v-show，发现用 v-show 比较好，可以达到要实现效果。
新手上路，多多指教！
v-if VS v-show
官网是这么说的：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
实践
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-if="isIf">
if
</div>
<div v-show="isShow">
show
</div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data:{
isIf : false,
isShow : true
}
})
</script>
</html>1、当两个都为 false 时
可以看到 v-if 是将dom元素删除、只有为真才会渲染 v-show 则是真假都会渲染，然后进行css的切换
2、两个都为 true 时，两个都进行渲染
Vue 学习中...
Copyright: 采用 知识共享署名4.0 国际许可协议进行许可 Links: https://cloud.tencent.com/developer/article/2020417
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-04-26，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录