初识 Vue.js v3：条件渲染

2023-12-08 10:35:24

导言

条件渲染是前端开发中必不可少的一环，它允许我们根据某些条件来动态地显示或隐藏元素。在 Vue.js v3 中，我们可以使用 v-if、v-else-if 和 v-else 指令来实现条件渲染。

v-if 指令

v-if 指令用于根据表达式结果来决定是否渲染元素。如果表达式的值是 truthy（即 true、"true"、1、"1" 等），则元素将被渲染；否则，元素将被隐藏。

例如，我们可以使用 v-if 指令来根据用户是否已登录来显示不同的内容：

<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来，{{ user.name }}！</p>
    <p v-else>请登录。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      user: {
        name: 'John Doe'
      }
    }
  }
}
</script>

在上面的示例中，如果 isLoggedIn 数据属性的值为 true，则第一个  元素将被渲染，否则第二个  元素将被渲染。

v-else-if 指令

v-else-if 指令用于在 v-if 指令的表达式为 false 时提供备用选项。例如，我们可以使用 v-else-if 指令来根据用户角色显示不同的内容：

<template>
  <div>
    <p v-if="isAdmin">您是管理员。</p>
    <p v-else-if="isEditor">您是编辑。</p>
    <p v-else>您是普通用户。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAdmin: false,
      isEditor: false
    }
  }
}
</script>

在上面的示例中，如果 isAdmin 数据属性的值为 true，则第一个  元素将被渲染。如果 isAdmin 数据属性的值为 false 且 isEditor 数据属性的值为 true，则第二个  元素将被渲染。否则，第三个  元素将被渲染。

v-else 指令

v-else 指令用于在所有其他条件都为 false 时提供备用选项。例如，我们可以使用 v-else 指令来显示一个默认消息：

<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来，{{ user.name }}！</p>
    <p v-else-if="isEditor">您是编辑。</p>
    <p v-else>请登录或注册。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isEditor: false,
      user: {
        name: 'John Doe'
      }
    }
  }
}
</script>