v-if v-show 的区别

目录

 

v-if

v-show

 总结

---

 

v-if

(1)作用： 根据条件渲染数据

            (2)语法：

                单分支：     v-if="条件语句"

                双分支：     v-else

                多分支:      v-else-if="条件语句"

            (3)注意点

                v-else与v-else-if的前面  必须要有  v-if 或者 v-else-if

v-show

(1)作用： 设置元素的display属性值

            (2)语法： v-show="属性值"

                属性值为true:   元素的display:block

                属性值为false:   元素的display:none

            (3)v-show与v-if区别

                v-if  : 条件渲染。  如果不满足条件，则该元素不会添加到DOM树中

                v-show: 显示与隐藏。 只是修改元素的display属性值

 总结

v-if本质其实是动态的创建 或者 删除元素节点。一般不用频繁切换, 要么显示, 要么隐藏的情况, 我都会用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。v-show本质是在控制元素的 css 样式,display: none;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换会大量的创建和删除元素, 消耗性能。