跳到主要内容

Vue.js条件渲染

介绍​

在 Vue.js 中，条件渲染是一种根据特定条件动态显示或隐藏 DOM 元素的技术。Vue 提供了多种指令来实现条件渲染，包括 v-if、v-else、v-else-if 和 v-show。这些指令可以帮助你根据应用程序的状态来控制页面的显示内容。

v-if 指令​

v-if 是 Vue.js 中最常用的条件渲染指令。它根据表达式的值来决定是否渲染某个元素。如果表达式的值为 true，元素将被渲染；如果为 false，元素将不会被渲染。

基本用法​

<template>
  <div>
    <p v-if="isVisible">这是一个可见的段落。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

在上面的例子中，isVisible 的值为 true，因此 <p> 元素会被渲染到页面上。如果将 isVisible 的值改为 false，<p> 元素将不会被渲染。

v-else 和 v-else-if​

v-else 和 v-else-if 可以与 v-if 结合使用，用于处理多个条件分支。

<template>
  <div>
    <p v-if="score >= 90">优秀</p>
    <p v-else-if="score >= 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      score: 85
    };
  }
};
</script>

在这个例子中，根据 score 的值，Vue 会渲染不同的 <p> 元素。如果 score 大于或等于 90，显示“优秀”；如果 score 大于或等于 60，显示“及格”；否则显示“不及格”。

备注

v-else 和 v-else-if 必须紧跟在 v-if 或 v-else-if 元素之后，否则它们将不会生效。

v-show 指令​

v-show 是另一种条件渲染指令，它与 v-if 的主要区别在于 v-show 不会从 DOM 中移除元素，而是通过 CSS 的 display 属性来控制元素的显示与隐藏。

基本用法​

<template>
  <div>
    <p v-show="isVisible">这是一个可见的段落。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

在这个例子中，isVisible 的值为 true，因此 <p> 元素会显示在页面上。如果将 isVisible 的值改为 false，<p> 元素仍然存在于 DOM 中，但会被隐藏。

提示

v-show 适用于需要频繁切换显示状态的元素，因为它不会重新渲染元素，只是简单地切换 CSS 的 display 属性。

v-if 与 v-show 的区别​

特性v-ifv-show
DOM 操作条件为 false 时移除元素条件为 false 时隐藏元素
初始渲染条件为 false 时不渲染元素无论条件如何，元素都会被渲染
性能适合条件不频繁变化的场景适合条件频繁变化的场景

实际案例​

假设你正在开发一个用户管理系统，需要根据用户的权限级别显示不同的操作按钮。

<template>
  <div>
    <button v-if="user.role === 'admin'">删除用户</button>
    <button v-else-if="user.role === 'editor'">编辑用户</button>
    <button v-else>查看用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        role: 'admin'
      }
    };
  }
};
</script>

在这个例子中，根据 user.role 的值，Vue 会渲染不同的按钮。如果用户是管理员，显示“删除用户”按钮；如果用户是编辑，显示“编辑用户”按钮；否则显示“查看用户”按钮。

总结​

Vue.js 提供了多种条件渲染指令，包括 v-if、v-else、v-else-if 和 v-show。v-if 和 v-show 的主要区别在于 v-if 会根据条件从 DOM 中移除或添加元素，而 v-show 只是通过 CSS 控制元素的显示与隐藏。根据实际需求选择合适的指令可以提高应用程序的性能和用户体验。

附加资源​

练习​

  1. 创建一个 Vue 组件，根据用户的登录状态显示不同的欢迎消息。
  2. 使用 v-show 实现一个简单的切换按钮，点击按钮时显示或隐藏一段文本。