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

<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>

<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>