vue set转list

在 Vue 中将 Set 转换成列表，可以使用 Array.from() 方法将 Set 转换成数组，然后使用 v-for 指令遍历数组，为每个数组元素创建一个列表项。

以下是一个示例代码，在 Vue 中将 Set 转换成列表：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      set: new Set(["A", "B", "C", "D"])
    };
  },
  computed: {
    list() {
      return Array.from(this.set); // 将 Set 转换成数组
    }
  }
};
</script>

在这个示例代码中，我们首先将一个包含了四个元素的 Set 赋值给了 data 中的 set 属性。然后，我们使用 computed 属性将 set 转换成了一个数组 list，该数组将被用来渲染列表。

在模板中，我们使用 v-for 指令遍历了数组 list，并为每个数组元素创建了一个列表项 li。在这个列表项中，我们使用了双向绑定语法 {{ item }}，来显示数组元素的值。

如果需要将数组中的元素转换成其他元素，比如对象，可以在列表项中访问对象的属性或者调用对象的方法，来渲染列表项的内容。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.name }} - {{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      set: new Set([
        { name: "Alice", age: 25 },
        { name: "Bob", age: 30 },
        { name: "Charlie", age: 35 }
      ])
    };
  },
  computed: {
    list() {
      return Array.from(this.set); // 将 Set 转换成数组
    }
  }
};
</script>

在这个示例代码中，我们将 Set 中的每个元素都转换成了一个对象，该对象包含 name 和 age 两个属性。在列表项中，我们通过访问对象的属性来显示每个元素的值。