(一)v-if 和 v-show
v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果.
-
v-if:从根本上把元素给 消除掉 或 创建追加,达到隐藏或显示的效果.
-
v-show:只是做了css样式(display:block/none)的切换而已.
语法:
<标签 v-if="布尔值"></标签>
<标签 v-show="布尔值"></标签>
一般来说
v-if 有更高的切换消耗 、v-show有更高的渲染消耗
如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。
(二)v-if、v-else-if 和 v-else
-
v-if可以单独使用
-
v-if 和 v-else 也可以合作使用,实现双路分支结构
-
v-if 、v-else-if 和 v-else 也可以合作使用,实现多路分支结构
语法:
<标签 v-if="布尔值"></标签>
<标签 v-else-if="布尔值"></标签>
<标签 v-else></标签>
总结:
-
v-for遍历 数组/对象 小单元/下标 :key
-
v-if 和 v-show boolean值 隐藏/显示 删除/创建 css样式控制
-
v-if、v-else-if、v-else可以形成多路分支结构