vue 提供了多种条件判断选项：条件渲染：使用 v-if 和 v-else 指令渲染元素。简化语法：简化简单的条件判断的语法。条件类：使用 v-bind:class 动态添加或删除 css 类。条件属性：使用 v-bind 设置元素属性。条件修饰符：修改条件判断行为，例如 .sync（同步数据）、.once（首次执行）和 .lazy（延迟执行）。

Vue 中的条件判断

Vue 提供了多种条件判断选项，用于动态渲染内容和控制组件行为。

条件渲染

使用 v-if 和 v-else 指令可以有条件地渲染元素：

<template><div v-if="condition">
    <!-- 要渲染的内容 -->
  </div>
  <div v-else>
    <!-- 条件不满足时的内容 -->
  </div>
</template>

简化语法

对于简单的条件判断，可以使用简化语法：

<template><div v-if="condition">...</div>
  <div v-else-if="condition2">...</div>
  <div v-else>...</div>
</template>

条件类

v-bind:class 指令可用于动态添加或删除 CSS 类，基于条件：

<template><div :class="{ 'active': condition }">
    <!-- 内容 -->
  </div>
</template>

条件属性

v-bind 指令还可用于在条件成立时设置元素属性：

<template><button :disabled="condition">
    <!-- 按钮 -->
  </button>
</template>

条件修饰符

Vue 提供了修饰符来修改条件判断行为：

• .sync：当条件改变时同步更新数据模型
• .once：仅在条件首次成立时执行操作
• .lazy：延迟条件检查，直到元素渲染完成

例如：

以下是一个使用条件判断控制组件可见性的示例：

<template><button>Toggle</button>
  <div v-if="show">
    <!-- 可见的内容 -->
  </div>
</template><script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    toggleShow() {
      this.show = !this.show;
    },
  },
};
</script>