Vue3-08-条件渲染-v-if 的基本使用

v-if 是什么

v-if  一个指令，
它是用来根据条件表达式，进行选择性地【展示】/【不展示】html元素的。

比如 ： 有一个按钮A，当条件为真时，展示该按钮；条件为假时，不展示该按钮。

与 js 中的 条件判断类似，也可以进行 else 的判断，对应的指令如下：
v-if: 条件为真时展示该html元素；
v-else-if: 条件为真时展示该html元素；
v-else: 不满足上述两个条件时展示该html元素。
以上三个指令就是完整的html元素的判断指令。

v-if 渲染的特点

v-if 的实现方式是 【插入】或【移除】html 的元素节点；
基于上述特点，在对组件使用 v-if 时，会触发 组件的 创建和销毁两个生命周期钩子。

v-else-if 与 js中的逻辑判断一样，可以重复存在多个；

v-else-if 、v-else 这两个指令必须要跟在一个 v-if 指令后面才会被识别，否则无效。

v-if 的使用案例