vue 三目运算符

// 示例代码：Vue 中使用三目运算符

<template>
  <div>
    <!-- 使用三目运算符根据条件显示不同的文本 -->
    <p>{{ isLoggedIn ? '欢迎回来，用户！' : '请登录' }}</p>

    <!-- 使用三目运算符为按钮设置不同的类名 -->
    <button :class="isLoggedIn ? 'btn-success' : 'btn-danger'">
      点击我
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个布尔类型的变量来模拟登录状态
      isLoggedIn: false
    };
  }
};
</script>

<style>
/* 样式只是为了演示 */
.btn-success {
  background-color: green;
  color: white;
}

.btn-danger {
  background-color: red;
  color: white;
}
</style>

解释说明：

1. 三目运算符：condition ? exprIfTrue : exprIfFalse 是 JavaScript 中的一种简洁语法，用于根据条件返回不同的值。在 Vue 中，它常用于模板中动态绑定数据或样式。
2. 示例 1：{{ isLoggedIn ? '欢迎回来，用户！' : '请登录' }} 根据 isLoggedIn 的布尔值，显示不同的文本内容。
3. 示例 2：:class="isLoggedIn ? 'btn-success' : 'btn-danger'" 根据 isLoggedIn 的布尔值，动态绑定不同的 CSS 类名。