vue3条件渲染

在 Vue 3 中，条件渲染是一种根据应用状态动态地显示或隐藏元素的技术。Vue 提供了多种指令和方法来实现条件渲染，包括 v-if、v-else-if、v-else、v-show 以及组合 API 中的条件逻辑。以下是对 Vue 3 中条件渲染的详细解释：

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

• v-if：用于根据表达式的真假来决定是否渲染元素。

  <template>
    <div v-if="isVisible">This is visible if isVisible is true</div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isVisible: true
      };
    }
  };
  </script>
  

• v-else-if：用于在 v-if 链中添加多个条件。

  <template>
    <div v-if="status === 'success'">Success!</div>
    <div v-else-if="status === 'pending'">Loading...</div>
    <div v-else-if="status === 'error'">Error occurred!</div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        status: 'pending'
      };
    }
  };
  </script>
  

• v-else：用于在 v-if 或 v-else-if 链的末尾添加一个默认条件。

  <template>
    <div v-if="status === 'success'">Success!</div>
    <div v-else-if="status === 'pending'">Loading...</div>
    <div v-else>Something went wrong!</div>
  </template>
  

2. v-show

• 用法：v-show 指令用于根据表达式的真假来决定是否显示元素，而不是渲染。元素始终存在于 DOM 中，只是通过 CSS 的 display 属性来控制显示。

  <template>
    <div v-show="isVisible">This is visible if isVisible is true</div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isVisible: true
      };
    }
  };
  </script>
  

• 区别：与 v-if 不同的是，v-show 不会移除元素，只是简单地切换元素的显示状态。这在需要频繁切换显示状态时性能更好。

3. 组合 API 中的条件渲染

• 使用 JavaScript 逻辑：在组合 API 中，可以使用 JavaScript 的条件逻辑来控制渲染。

  <template>
    <div v-if="shouldRender">This is rendered based on JavaScript logic</div>
  </template>
  
  <script>
  import { ref, computed } from 'vue';
  
  export default {
    setup() {
      const isActive = ref(true);
      const shouldRender = computed(() => isActive.value && someOtherCondition());
  
      function someOtherCondition() {
        // 自定义条件逻辑
        return true;
      }
  
      return {
        shouldRender
      };
    }
  };
  </script>
  

4. 使用 <template> 进行条件渲染

• <template> 标签：<template> 标签本身不会渲染到 DOM 中，但可以用来包裹多个元素，结合条件渲染指令一起使用。

  <template>
    <div v-if="condition">
      <template v-if="anotherCondition">
        <p>Condition and anotherCondition are both true.</p>
      </template>
      <template v-else>
        <p>Condition is true, but anotherCondition is false.</p>
      </template>
    </div>
  </template>
  

5. v-if 与 v-for 优先级

• 优先级：当 v-if 与 v-for 一起使用时，v-for 的优先级比 v-if 高。这意味着即使 v-if 返回 false，v-for 仍然会遍历整个列表。为了避免这种情况，通常建议在同一个元素上避免同时使用 v-if 和 v-for。

  <!-- 不推荐 -->
  <div v-for="item in items" v-if="item.isVisible" :key="item.id">
    {{ item.name }}
  </div>
  
  <!-- 推荐 -->
  <template v-for="item in items" :key="item.id">
    <div v-if="item.isVisible">
      {{ item.name }}
    </div>
  </template>
  

总结

• v-if、v-else-if、v-else：用于根据条件动态地渲染元素。
• v-show：用于根据条件动态地显示或隐藏元素，而不移除它们。
• 组合 API：利用 JavaScript 逻辑在 setup 函数中实现更复杂的条件渲染。
• <template> 标签：用于包裹多个元素，结合条件渲染指令使用。
• 优先级：注意 v-if 和 v-for 的优先级问题，避免潜在的性能陷阱。

通过这些工具和方法，Vue 3 提供了灵活且强大的条件渲染功能，帮助开发者根据应用状态动态地控制内容的显示和隐藏。