如何使用v-for有条件地显示图标？

在使用v-for进行列表渲染时，如果你想有条件地显示图标，可以通过绑定v-if或者计算属性来实现。以下是一个基于Vue 3的示例代码，展示了如何根据条件显示图标：

<template>
  <div>
    <ul>
      <!-- 使用v-for遍历items数组，并使用v-if判断是否显示图标 -->
      <li v-for="(item, index) in items" :key="index">
        {{ item.text }}
        <!-- 只有当item.showIcon为true时，才显示图标 -->
        <span v-if="item.showIcon">🌟</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 示例数据，每个item都有一个showIcon属性来决定是否显示图标
      items: [
        { text: 'Item 1', showIcon: true },
        { text: 'Item 2', showIcon: false },
        { text: 'Item 3', showIcon: true }
      ]
    };
  }
};
</script>

在这个例子中，我们有一个items数组，每个元素都有一个text属性和一个showIcon属性。我们使用v-for指令来遍历这个数组，并在每个列表项中显示text属性的值。同时，我们使用v-if指令来判断showIcon属性的值，如果为true，则显示一个星形图标。

这种方法的优点是简单直观，但是当条件逻辑变得复杂时，可能会导致模板过于臃肿。在这种情况下，你可以考虑使用计算属性来简化模板逻辑。

例如，你可以创建一个计算属性itemsWithIcons，它返回一个新的数组，其中每个元素都包含一个计算出来的icon属性：

<template>
  <div>
    <ul>
      <!-- 使用v-for遍历itemsWithIcons数组 -->
      <li v-for="(item, index) in itemsWithIcons" :key="index">
        {{ item.text }}
        <!-- 显示计算出来的icon -->
        <span v-if="item.icon">🌟</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1', showIcon: true },
        { text: 'Item 2', showIcon: false },
        { text: 'Item 3', showIcon: true }
      ]
    };
  },
  computed: {
    // 计算属性，根据items数组生成一个新的数组，包含icon属性
    itemsWithIcons() {
      return this.items.map(item => ({
        ...item,
        icon: item.showIcon ? '🌟' : null
      }));
    }
  }
};
</script>

在这个改进的例子中，我们使用计算属性itemsWithIcons来处理显示逻辑，这样可以使模板更加清晰，并且更容易维护。

参考链接：