vue.js之v-show 与 v-if
2017-11-07 18:17
549 查看
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 较好。
相关文章推荐
- Vue.js 中 v-if 和 v-show 的区别
- Vue.js 中 v-if 和 v-show 有什么区别?(转)
- Vue.js中v-show和v-if使用时的注意事项
- Vue.js 条件渲染 v-if、v-show、v-else
- Vue.js 中 v-if 和 v-show 的区别
- Vue.js使用v-show和v-if的注意事项
- 深入理解vue.js中的v-if和v-show
- Vue.js常用指令汇总(v-if//v-show//v-else//v-for//v-bind//v-on等)
- 对于v-if 和 v-show的选择 --Vue.js
- Vue.js 中 v-if 和 v-show 有什么区别?
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- vue.js 嵌套循环、if判断、动态删除的实例
- vue.js v-if和v-for那些事(小例子提一提props)
- VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
- AngularJs ng-show 和 ng-if的区别
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- VUE中的v-if与v-show
- vue.js 中的在v-for节点中嵌入 v-if 的解释
- vue学习笔记二:v-if和v-show的区别
- [Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)