vue.js之v-show 与 v-if
来源:互联网 发布:php 淘宝csv导入源码 编辑:程序博客网 时间:2024/06/07 17:31
v-show 指令
v-show 根据表达式之真假值来控制元素的显示/隐藏的(css的display属性)。
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
<div id="app"> <p v-show="show1">显示</p> <p v-show="show2">隐藏</p></div><script> let vm = new Vue({ el: "#app", data: { show1: true, show2: false } });</script>
v-show 不支持 元素,也不支持 v-else。
v-if、v-else-if、v-else 组合指令
<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div></div><script> let vm = new Vue({ el: "#app", data: { type: 'D', } });</script>
返回结果:Not A/B/C
v-show 与 v-if 的区别
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
阅读全文
0 0
- vue.js之v-show 与 v-if
- VUE中的v-if与v-show
- Vue v-if v-show
- Vue.js 中 v-if 和 v-show 的区别
- Vue.js 中 v-if 和 v-show 的区别
- 对于v-if 和 v-show的选择 --Vue.js
- vue.js中的条件渲染(v-if/v-else/v-else-if/v-show)
- vue:v-if与v-show的区别
- v-show与v-if
- Vue.js学习笔记:v-if条件渲染与v-show区别
- 谈谈Vue.js里v-if与v-show的区别
- Vue 中的 v-if 和 v-show
- VUE条件渲染(v-if v-show v-for)
- v-if与v-show的区别?
- v-if与v-show区别
- Vue.js 中 v-if 和 v-show 有什么区别?
- Vue.js中v-show和v-if使用时的注意事项
- Vue.js 中 v-if 和 v-show 有什么区别?
- 线性代数笔记(网易公开课)
- 第二次被mo意义续
- 动态HTML处理和机器图像识别
- Spring
- XListView请求网络数据
- vue.js之v-show 与 v-if
- 树的前序、中序遍历的递归和非递归实现
- ubuntu简单编译安装nginx
- JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
- 世界级的开源项目:TiDB 如何重新定义下一代关系型数据库
- C语言混合数值和字符输入简单介绍
- 动态HTML介绍
- 推荐几个H5、app制作开发工具
- 获取苹果设备和系统信息(更新至iPhone X)