Vue 中 if else 的写法

在Vue开发中，条件判断是非常常见的需求，而if else语句的灵活运用可以帮助我们根据不同的条件来渲染不同的内容或执行不同的逻辑。本文将介绍Vue中if else的几种常见写法。

一、v-if和v-else指令

v-if 指令用于根据表达式的值来条件性地渲染元素。如果表达式的值为真，则渲染该元素；如果为假，则不渲染。v-else 指令必须紧跟在 v-if 或 v-else-if 指令之后，用于表示当 v-if 条件不满足时的情况。

示例代码如下：

<template>
  <div>
    <p v-if="isShow">显示内容</p>
    <p v-else>隐藏内容</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true
    };
  }
};
</script>

二、v-else-if指令

当需要判断多个条件时，可以使用 v-else-if 指令。它可以在 v-if 条件不满足时，继续判断其他条件。

示例代码如下：

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 80">良好</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    };
  }
};
</script>

三、使用计算属性进行条件判断

除了直接在模板中使用 v-if、v-else 和 v-else-if 指令外，还可以使用计算属性来进行条件判断。计算属性可以根据数据的变化动态地返回不同的值，从而实现条件判断的效果。

示例代码如下：

<template>
  <div>
    <p>{{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 10
    };
  },
  computed: {
    result() {
      return this.num > 5? '大于5' : '小于等于5';
    }
  }
};
</script>

通过以上几种方式，我们可以在Vue中灵活地实现if else的条件判断，根据不同的需求选择合适的写法，提高代码的可读性和可维护性。