1. v-if
v-if 指令用于根据表达式的值来决定是否渲染元素。如果表达式为真，元素将被渲染，否则将被忽略。
<div v-if="isTrue">This is true</div>
2. v-else-if 和 v-else
v-else-if 和 v-else 用于在 v-if 后面添加额外的条件分支。
<div v-if="isTrue">This is true</div>
<div v-else-if="isFalse">This is false</div>
<div v-else>This is neither true nor false</div>
在上述例子中，只有一个分支会被渲染，取决于条件的值。
3. v-show
除了使用 v-if 系列指令外，还可以使用 v-show 来根据条件显示或隐藏元素。v-show 不会销毁和重新创建元素，而是通过 CSS 的 display 属性来切换元素的可见性。
<div v-show="isVisible">This may be visible or hidden</div>
一般情况下，如果你在不同的条件之间频繁切换，v-show 的性能可能更好。如果你的条件很少改变，使用 v-if 通常更合适。
4. 在 template 元素中使用条件语句
你还可以在 template 元素中使用条件语句，这对于需要包装多个元素时很有用。
<template v-if="isTrue">
<p>This is true</p>
<p>Another paragraph</p>
</template>
<template v-else>
<p>This is false</p>
</template>
以上是 Vue.js 3 中条件语句的基本用法。使用条件语句，你可以根据数据的不同状态灵活地显示或隐藏内容，以满足不同的页面需求。
转载请注明出处：http://www.zyzy.cn/article/detail/12977/Vue3