vue3学习（条件渲染）

条件渲染

只要出现v-开头的就是指令。

v-if

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true值得时候被渲染。

 

即flag为true的时候显示我是孙猴子。flag为false的时候不显示我是孙猴子。

v-else

可以使用v-else指令来表示v-if的“else”块。

 

一个v-else元素必须跟在一个v-if或者v-else-if元素后面，否则将不会被识别到。

v-else-if

可以使用v-else-if指令来表示v-if的“else if区块”。它可以连续多次重复使用。

 

（需要注意，不要忘记单引号，否则将无显示。）

 

和v-else类似，一个使用v-else-if的元素必须紧跟在一个v-if或一个v-else-if元素后面。

v-show

另一个用于条件性展示元素的选项是v-show指令，控制某块内容显示或者不显示。

 

若flag：true,则显示hello,若flag:false,则不显示hello.

v-if和v-show的区别

v-if是“真正”的条件渲染，因为它会确保在切换的过程中，条件块内的事件监听器和子组件适当地被销毁和重建。（当v-if为真的时候把“真的”对应的内容渲染，若为假的时候则把dom里“真的”对应的内容删除）。V-if也是惰性的，如果初始渲染时条件为假，则什么也不做，直到第一次变为真时，才会开始渲染条件块。

v-show则是无论初始条件是真或是假，都会渲染元素，它只是简单的通过css控制是否显示元素。

 

Flag为true:

界面显示为：

 

元素显示为：

 

Flag为false:

界面显示为：

 

元素显示为：

 

一般来说，v-if有更高的切换开销（每一次切换都要删除再添加），而v-show有更高的初始渲染开销。因此，如果需要频繁地切换用v-show比较好；如果在运行时条件很少改变，则使用v-if较好。