【Vue】vue项目简单数组、数组对象去重

Silviaya

已于 2023-08-25 22:27:15 修改

阅读量721

点赞数 2

分类专栏： vue JS 文章标签： vue

于 2020-08-28 09:56:11 首次发布

本文链接：https://blog.csdn.net/weixin_46368797/article/details/108273664

版权

JS 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>数组去重练习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>

  <body>
    <div class="container" id="app">
      <div>
        数组1:<span>{{simpleDataArray}}</span>&nbsp;&nbsp;&nbsp;<button
          @click="duplicationSimpleArray()"
        >
          点击去重
        </button>
        <span v-if="simpleDataArrayAfter.length>0"
          >{{tipsDupAfter}}{{simpleDataArrayAfter}}</span
        >
      </div>
      <div>
        数组2:<span>{{objectDataArray}}</span>&nbsp;&nbsp;&nbsp;<button
          @click="duplicationObjectArray()"
        >
          点击去重
        </button>
        <span v-if="objectDataArrayAfter.length>0"
          >{{tipsDupAfter}}{{objectDataArrayAfter}}</span
        >
      </div>
    </div>

    <script src="js/vue.min.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          simpleDataArray: [1, 2, 1, 8, 10, 8],
          simpleDataArrayAfter: "",
          objectDataArray: [
            { id: "1", name: "jack" },
            { id: "1", name: "jack" },
            { id: "2", name: "rose" },
          ],
          objectDataArrayAfter: "",
          tipsDupAfter: "去重后:",
        },
      
        methods: {
          initTips() {
            this.tipsStr = this.tips.substring(0, this.index++);
          },
          duplicationSimpleArray() {
            let newArray1 = this.simpleDataArray.filter(
              (item, index, self) => self.indexOf(item) === index
            );
            this.simpleDataArrayAfter = newArray1;
          },
          duplicationObjectArray() {
            const newObj = {};
            const newObjArray = [];
            this.objectDataArray.forEach((element) => {
              if (!newObj[element.name]) {
                newObjArray.push(element);
                newObj[element.name] = true;
              }
            });
            this.objectDataArrayAfter = newObjArray;
          },
        },
      });
    </script>
  </body>
</html>