一、基础语法

v-if
v-else
v-else-if

v-show

v-if和v-show的区别

• v-if 可以实现更多条件判定，而v-show只能实现真假判定
• v-show会加载组件，只是不显示出来；v-if则不会加载组件。所以v-show有较高的初始渲染开销，v-if则会有比较高的使用加载时开销

二、v-if

使用下述代码替换 app.vue中的代码

<script setup>
const flag = 3
</script>

<template>
    <p v-if="flag===1">flag=1 的时候才会打印</p>
    <p v-else-if="flag===2">flag=2 的时候才会被打印</p>
    <p v-else>flag不等于1和2的时候才会被打印</p>
</template>

三、v-show

使用下述代码替换 app.vue中的代码

<script setup>
const res1 = true
const res2 = false
</script>

<template>
    <p v-show="res1">为真时可以看到</p>
    <p v-show="res2">为假时看不到</p>
</template>