Vue 提供了多种条件判断选项：条件渲染：使用 v-if 和 v-else 指令渲染元素。简化语法：简化简单的条件判断的语法。条件类：使用 v-bind:class 动态添加或删除 CSS 类。条件属性：使用 v-bind 设置元素属性。条件修饰符：修改条件判断行为，例如 .sync（同步数据）、.once（首次执行）和 .lazy（延迟执行）。
Vue 中的条件判断
Vue 提供了多种条件判断选项，用于动态渲染内容和控制组件行为。
条件渲染
使用 v-if 和 v-else 指令可以有条件地渲染元素：
立即学习“前端免费学习笔记（深入）”；
<code><template>
<div v-if="condition">
<!-- 要渲染的内容 -->
</div>
<div v-else>
<!-- 条件不满足时的内容 -->
</div>
</template></code>简化语法
对于简单的条件判断，可以使用简化语法：
<code><template> <div v-if="condition">...</div> <div v-else-if="condition2">...</div> <div v-else>...</div> </template></code>
条件类
v-bind:class 指令可用于动态添加或删除 CSS 类，基于条件：
<code><template>
<div :class="{ 'active': condition }">
<!-- 内容 -->
</div>
</template></code>条件属性
v-bind 指令还可用于在条件成立时设置元素属性：
<code><template>
<button :disabled="condition">
<!-- 按钮 -->
</button>
</template></code>条件修饰符
Vue 提供了修饰符来修改条件判断行为：
-
.sync：当条件改变时同步更新数据模型 -
.once：仅在条件首次成立时执行操作 -
.lazy：延迟条件检查，直到元素渲染完成
例如：
以下是一个使用条件判断控制组件可见性的示例：
<code><template>
<button @click="toggleShow">Toggle</button>
<div v-if="show">
<!-- 可见的内容 -->
</div>
</template>
<script>
export default {
data() {
return {
show: false,
};
},
methods: {
toggleShow() {
this.show = !this.show;
},
},
};
</script></code> 
