从零开始：使用 Vue.js 的 v-if 指令进行条件渲染

2024-01-06 05:06:17

v-if 指令：Vue.js 中的元素可见性神器

在构建交互式且动态的 Vue.js 应用程序时，v-if 指令扮演着至关重要的角色。它赋予你控制元素可见性的超能力，使你能根据数据或用户交互条件渲染或隐藏元素。

初探 v-if

v-if 指令本质上是一个布尔属性，它接受一个表达式作为参数。当表达式求值为 true 时，绑定的元素将出现在 DOM 中；反之，该元素将被隐藏。以下是一个简单的示例：

<div v-if="isVisible">
  我是可见的！
</div>

进阶用法

v-if 指令的强大之处远不止于此。它还可用于处理更复杂的情况。

带 Else 块的 v-if：

有时，当条件为 false 时，你可能需要显示不同的内容。此时，Else 块就会派上用场：

<div v-if="isVisible">
  我是可见的！
</div>
<div v-else>
  我是隐藏的。
</div>

多个 v-if：

当需要基于多个条件控制元素可见性时，可以组合多个 v-if 指令。例如：

<div v-if="isVisible && isLoggedIn">
  我是可见的，并且用户已登录！
</div>

模板 ref：

模板 ref 允许你访问 DOM 元素，即使该元素不是直接渲染的。这在需要控制动态创建的元素可见性时非常有用：

<template>
  <button @click="toggleVisibility">显示/隐藏</button>
  <div ref="myElement" v-if="isVisible">
    我是可见的！
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isVisible: false,
      }
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      },
    },
  }
</script>