vue指令v-if与v-show与v-else

vue指令中v-if与v-show及v-if与v-else的用法和区别

vue指令v-if&v-show

在vue中，v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果

基本语法

<标签 v-if="true/false"></标签>
<标签 v-show="true/false"></标签>
<!--true:显示   false:隐藏-->

原理

v-if：通过 创建、销毁 方式达到显示、隐藏效果的(销毁后有一个占位符)

v-show：其是通过css控制达成显示、隐藏效果的（ 显示—display:block; 隐藏—display:none; ）

相同点

两者都是在判断DOM节点是否要显示。

不同点

实现方式

v-if是根据语句的值的真假值判断直接从Dom树上删除或重建元素节点

v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

编译过程

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

编译条件

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；

性能消耗

v-if有更高的切换消耗，不适合做频繁的切换；

v-show有更高的初始渲染消耗，适合做频繁的额切换；

vue指令v-if&v-else

在Vue中，v-if 、v-else-if 和 v-else 三个指令结合可以实现多路分支结构

• v-if可以单独使用，形成单路分支结构
• v-if 和 v-else 也可以合作使用，实现双路分支结构
• v-if 、v-else-if 和 v-else 也可以合作使用，实现多路分支结构

基本语法

<标签 v-if="true/false"></标签>
<标签 v-else-if="true/false"></标签>
<标签 v-else-if="true/false"></标签>
<标签 v-else></标签>

以上4个标签只分支结构，最终只会走一个，第一个为true的那个标签会执行 或 执行v-else