Vue.js 中的 `v-if`、`v-else-if` 和 `v-else`：条件渲染详解

<template>
  <div>
    <button v-if="!isLoggedIn" @click="login">Login</button>
    <button v-else-if="isLoggedIn && isAdmin" @click="goToAdminPanel">Admin Panel</button>
    <button v-else @click="goToUserCenter">User Center</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isAdmin: false,
    };
  },
  methods: {
    login() {
      this.isLoggedIn = true;
      // 假设登录成功后我们从服务端获取用户角色
      this.isAdmin = true; // 示例：将用户设置为管理员
    },
    goToAdminPanel() {
      // 跳转到管理面板
    },
    goToUserCenter() {
      // 跳转到用户中心
    },
  },
};
</script>

<template>
  <div>
    <input v-model="inputValue" @input="validateInput" placeholder="Enter something"/>
    <p v-if="inputStatus === 'empty'">请输入内容</p>
    <p v-else-if="inputStatus === 'invalid'">输入格式不正确</p>
    <p v-else-if="inputStatus === 'valid'">输入有效</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: '',
      inputStatus: 'empty', // 'empty', 'invalid', 'valid'
    };
  },
  methods: {
    validateInput() {
      if (this.inputValue === '') {
        this.inputStatus = 'empty';
      } else if (!/^[a-zA-Z0-9]+$/.test(this.inputValue)) {
        this.inputStatus = 'invalid';
      } else {
        this.inputStatus = 'valid';
      }
    },
  },
};
</script>