15 条件渲染与列表渲染之v-if与v-else用法

在上一章中，我们探讨了计算属性和侦听器的原理与应用。计算属性能够根据已有的数据动态计算出需要展示的值，而侦听器则用于监听数据的变化并执行特定操作。今天，我们将关注条件渲染与列表渲染中的 v-if 和 v-else 用法，这些指令可以帮助我们根据不同情况渲染不同的内容。

1. v-if的基本用法

v-if 是 Vue 提供的一个指令，用于根据条件动态地渲染模板。只有当表达式的值为真时，相关的元素才会被渲染到 DOM 中。反之，则不会渲染。

示例：基本条件渲染

假设我们有一个简单的登录界面，我们想根据用户是否登录来显示不同的信息。

<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来，用户！</p>
    <p v-else>请登录以继续。</p>
    <button @click="toggleLogin">{{ isLoggedIn ? '退出' : '登录' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false // 用户初始状态为未登录
    };
  },
  methods: {
    toggleLogin() {
      this.isLoggedIn = !this.isLoggedIn; // 切换登录状态
    }
  }
}
</script>

在上面的例子中，v-if 和 v-else 根据 isLoggedIn 的状态来选择渲染的内容。按钮点击后，状态切换，视图自动更新。

2. v-else的用法

v-else 必须与 v-if 配合使用，它是 v-if 的对立面。当 v-if 条件为假时，v-else 中的内容将被渲染。请注意，v-else 不能单独存在，必须紧随其前的一个 v-if 元素之后。

示例：使用v-else

以下示例展示了如何在用户未订阅和已订阅之间切换。

<template>
  <div>
    <p v-if="isSubscribed">感谢您的订阅！</p>
    <p v-else>你还没有订阅，请考虑订阅我们的服务。</p>
    <button @click="toggleSubscription">{{ isSubscribed ? '取消订阅' : '订阅' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSubscribed: false // 用户初始状态为未订阅
    };
  },
  methods: {
    toggleSubscription() {
      this.isSubscribed = !this.isSubscribed; // 切换订阅状态
    }
  }
}
</script>

在这个案例中，用户的订阅状态决定了展示的内容。通过点击按钮，状态切换，更新视图。

3. 多条件渲染与v-else-if

有时候，我们需要根据多个条件来渲染不同的内容。这时，可以使用 v-else-if 来连接多个条件。

示例：多条件渲染

假设我们需要根据天气情况渲染不同的消息：

<template>
  <div>
    <p v-if="weather === 'sunny'">今天是个好天气，适合出门！</p>
    <p v-else-if="weather === 'rainy'">今天下雨了，记得带伞！</p>
    <p v-else>天气状况不明，请查看天气预报。</p>
    <select v-model="weather">
      <option value="sunny">晴天</option>
      <option value="rainy">雨天</option>
      <option value="unknown">未知</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weather: 'unknown' // 初始天气状态
    };
  }
}
</script>

在这个示例中，我们使用 v-if、v-else-if 和 v-else 来根据选择的天气情况渲染不同的提示信息。

4. 结合计算属性的应用

条件渲染和计算属性结合可以使代码更加清晰。我们可以定义一个计算属性来处理条件判断。

示例：使用计算属性进行条件渲染

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="toggleSubscription">{{ isSubscribed ? '取消订阅' : '订阅' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isSubscribed: false // 初始状态为未订阅
    };
  },
  computed: {
    message() {
      return this.isSubscribed ? '感谢您的订阅！' : '你还没有订阅，请考虑订阅我们的服务。';
    }
  },
  methods: {
    toggleSubscription() {
      this.isSubscribed = !this.isSubscribed; // 切换订阅状态
    }
  }
}
</script>

在这个示例中，我们将渲染的逻辑放在了计算属性 message 中，使得模板变得更加简单易懂。

结语

在本章中，我们深入探讨了 v-if 和 v-else 的基本用法，以及如何根据条件动态渲染内容。掌握了这些概念后，你将能有效地管理 Vue 组件中的视图状态。下一章节，我们将学习 v-for 指令，通过遍历数组来进行列表渲染。敬请期待！