-
v-show:v-show 通过设置内联样式的 display CSS 属性来工作,当元素可见时将使用初始 display值。当条件改变时,也会触发过渡效果。
https://cn.vuejs.org/api/built-in-directives#v-show -
v-if:基于表达式值的真假性,来条件性地渲染元素或者模板片段。当 v-if 元素被触发,元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假,那么其内部的内容根本都不会被渲染。
https://cn.vuejs.org/api/built-in-directives#v-if
v-if 和 v-show 区别:
https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#v-if-%E5%92%8C-v-show-%E5%8C%BA%E5%88%AB
- v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。
- 相比之下,v-show 就简单得多,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换,来控制元素的显示和隐藏。
根据应用场景选择:
- v-if 有更高的切换开销,如果在运行时条件很少改变,则使用 v-if 较好。
- v-show 有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好。
注意:
- 不推荐同时使用 v-if 和 v-for。
- 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。