条件与循环的舞步，为 Vue 应用增添交互魅力！

条件渲染：if 和 v-if

条件渲染可以使用 v-if 指令来实现，它根据提供的条件来控制元素的可见性。v-if 指令接受一个布尔值表达式，如果表达式为 true，则渲染元素，否则将其隐藏。

<template>
  <div>
    <p v-if="show">显示的文本</p>
    <p v-else>隐藏的文本</p>
  </div>
</template>

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

循环：v-for

循环可以通过 v-for 指令来实现，它遍历数据结构并为每个元素渲染模板。v-for 指令接受三个参数：

• item：循环中每个元素的局部变量名
• in：要遍历的数据结构
• key：用于跟踪元素身份的唯一键（可选）

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          { id: 1, name: "Item 1" },
          { id: 2, name: "Item 2" },
        ],
      };
    },
  };
</script>

嵌套条件和循环

条件和循环可以嵌套使用以创建更复杂的行为。例如，您可以使用条件来控制循环的可见性，或者使用循环来渲染具有不同内容的条件块。

<template>
  <div v-if="show">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
  <p v-else>没有项目可显示</p>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
        items: [],
      };
    },
  };
</script>

最佳实践：

• 使用唯一的键：在循环中使用 :key 属性可以帮助 Vue 追踪元素，从而提高性能。
• 明确条件：确保条件表达式清晰且容易理解。
• 考虑加载状态：当循环正在加载数据时，使用加载状态来通知用户。
• 避免深度嵌套：避免深度嵌套条件和循环，因为它会使代码难以维护。