记 es6 Set去重实现常用菜单

最新推荐文章于 2024-09-16 06:30:00 发布

起什么名都被注册了

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量84

点赞数

文章标签： es6 前端 javascript

本文链接：https://blog.csdn.net/qq_34509189/article/details/126009196

版权

该博客展示了如何在Vue组件中利用Set数据结构进行数组去重操作。当用户点击预设选项时，选项被添加到数组并去重，同时更新显示已点击过的选项。示例代码包括了模板、数据和方法部分，其中`push`方法用于处理点击事件，并通过`Array.from(new Set(this.arr))`实现去重。

摘要由CSDN通过智能技术生成

记 Set 去重

<template>
  <div>
    <div class="click" v-show="routerpush[0]?.name ?? false">
      <h1>点击过的</h1>
      <div v-for="item in routerpush" :key="item.id">{{ item.name }}</div>
    </div>
    <div class="app">
      <h1>xxxxx</h1>
      <div v-for="item in item" :key="item.id" @click="push(item)">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      routerpush: [],
      arr: [],
      item: [
        {
          name: "预设一",
          id: 11,
          class: "first",
        },
        {
          name: "预设二",
          id: 12,
          class: "second",
        },
        {
          name: "预设三",
          id: 13,
          class: "third",
        },
        {
          name: "预设四",
          id: 14,
          class: "fourth",
        },
      ],
    };
  },
  methods: {
    push(item) {
      this.arr.unshift(item);
      this.routerpush = Array.from(new Set(this.arr));
      console.log(this.routerpush);
    },
  },
};
</script>