第2章 Vue.js基础语法

第4节：条件与列表渲染

在Vue.js中，条件渲染和列表渲染是常用的功能，它们允许我们根据数据动态地显示或隐藏元素，以及渲染列表数据。

2.4.1 条件渲染指令详解

Vue提供了多种条件渲染指令，用于根据表达式的值来决定是否渲染元素。

1. v-if、v-else-if、v-else

v-if指令用于条件性地渲染一块内容，只有当表达式返回真值时才会渲染。

<template>
  <!-- 基本使用 -->
  <h1 v-if="showTitle">欢迎使用Vue.js</h1>
  
  <!-- v-else-if 和 v-else -->
  <div class="user-type">
    <p v-if="userType === 'admin'">管理员用户</p>
    <p v-else-if="userType === 'editor'">编辑用户</p>
    <p v-else-if="userType === 'visitor'">访客用户</p>
    <p v-else>未知用户类型</p>
  </div>
  
  <!-- 嵌套使用 -->
  <div v-if="hasPermission">
    <p v-if="userType === 'admin'">管理员权限</p>
    <p v-else>普通用户权限</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true,
      userType: 'admin',
      hasPermission: true
    }
  }
}
</script>

2. v-show vs v-if性能对比

v-show指令也用于条件性地显示元素，但它与v-if有一些重要的区别：

<template>
  <h2 v-show="showHeading">使用v-show显示的标题</h2>
  <h2 v-if="showHeading">使用v-if显示的标题</h2>
</template>

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

主要区别：

特性	v-if	v-show
渲染方式	条件为真时渲染，为假时销毁元素	始终渲染，通过CSS的display属性控制显示/隐藏
初始渲染开销	条件为假时开销小	始终有渲染开销
切换开销	较大（涉及DOM的创建和销毁）	较小（仅CSS样式修改）
适用场景	条件不经常改变的场景	条件频繁改变的场景
支持的元素	任何元素，包括