Vue 条件渲染与循环，前端开发的必杀技！

实现方法：

• v-if：如果表达式为真，则显示元素。
• v-else：如果 v-if 表达式为假，则显示元素。
• v-else-if：用于检查其他条件，并仅在满足时显示元素。

示例：

<template>
  <div>
    <p v-if="isLoggedIn">欢迎回来，{{ user.name }}！</p>
    <p v-else>请登录。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      user: { name: "John" },
    };
  },
};
</script>

Vue 循环

循环可用于在 Vue 中遍历数组、对象和集合，并为每个元素呈现内容。它提供了简洁且可读的方式来显示重复数据。

实现方法：

• v-for：用于遍历数组或对象，并为每个元素创建项目模板。
• v-for="item in myArray"：遍历 myArray 中的每个元素，并将其分配给变量 item。
• v-for="item, index in myArray"：同时遍历元素和索引。
• v-for="item in myObject"：遍历对象中的键和值对。

示例：

<template>
  <ul>
    <li v-for="number in [1, 2, 3, 4, 5]">
      {{ number }}
    </li>
  </ul>
</template>

条件渲染和循环的组合

条件渲染和循环可以结合使用，以根据特定条件显示或隐藏循环元素。例如，您可以仅在某个条件满足时显示数组中的某些元素。

示例：

<template>
  <ul>
    <li v-for="number in [1, 2, 3, 4, 5]" v-if="number % 2 === 0">
      {{ number }}
    </li>
  </ul>
</template>

在上面的示例中，循环将遍历数字 1 到 5，但 v-if 表达式将过滤掉奇数，只显示偶数。

最佳实践

• 使用 v-if 和 v-else 配对：将元素隐藏指定为 v-else，而不是在 v-if 表达式中使用 ! 运算符。
• 避免嵌套循环：尽量保持循环扁平，而不是嵌套多个循环。
• 使用键：在循环中使用键，以优化 DOM 操作和追踪唯一元素。
• 使用 v-once：将静态元素标记为 v-once，以优化其渲染。
• 避免与过多的条件渲染：过多的条件渲染可能导致性能问题，因此应谨慎使用。