Vue中v-show与v-if区别

要想知道v-show与v-if区别,得先了解它们的作用和语法

v-if

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

(2)语法：

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

       双分支：    v-else

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

 (3)注意点

       v-esle前面要有v-if或者v-else-if

v-show

(1)作用： 修改元素的样式属性

(2)语法： v-show="条件"

      条件成立 true :display属性为block,条件不成立 false: display属性为none

v-show与v-if区别

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