Vue.js功法之练气初期：复习知识点之条件渲染（Conditional Rendering）

条件渲染（Conditional Rendering）

在Vue.js中，条件渲染是一种根据数据的不同情况来决定是否渲染特定部分的技术。这通常使用v-if、v-else-if和v-else指令来实现。

为什么使用条件渲染？

1. 动态显示内容： 根据数据的不同状态，显示或隐藏特定的页面元素。
2. 更好的用户体验： 通过根据不同条件渲染不同的内容，可以提供更好的用户交互体验。

示例代码

假设我们有一个简单的登录页面，根据用户是否登录来展示不同的内容：

<template>
  <div>
    <h2>用户登录</h2>
    <div v-if="isLogged">
      <p>欢迎回来，{{ username }}！</p>
      <button @click="logout">退出登录</button>
    </div>
    <div v-else>
      <p>请登录</p>
      <form @submit.prevent="login">
        <label for="username">用户名:</label>
        <input type="text" id="username" v-model="inputUsername" required>
        <label for="password">密码:</label>
        <input type="password" id="password" v-model="inputPassword" required>
        <button type="submit">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogged: false,
      username: "",
      inputUsername: "",
      inputPassword: "",
    };
  },
  methods: {
    login() {
      // 这里可以添加登录逻辑，这里简化为切换登录状态
      this.isLogged = true;
      this.username = this.inputUsername;
    },
    logout() {
      // 退出登录逻辑
      this.isLogged = false;
      this.username = "";
    },
  },
};
</script>