Vue.js 如何使用 v-for 和 v-if 判断数组中是否有重复值

可以使用 Vue.js 的计算属性和 Set 对象来实现判断数组中是否有重复值：

<template>
  <div>
    <ul>
      <li v-for='item in uniqueCp' :key='item.name'>{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cp: [
          {
            name: '拉网铝单板',
            url: '#',
            jj: '该产品是室内天花吊顶的个性化产品，工艺先进的拉网技术，造就了细腻的网格。搭配下来，会营造出视觉通透的效果，并且能在一定程度上降低噪音污染，金属铝拉网以优质铝合金为主要材料，按客户提供设计尺寸、形状和构造形式经过工',
            titlepic: '/d/file/p/2023/05-30/d7bf16ab5659c851eb93c87a2274feac.jpg',
          },
          {
            name: '浮雕铝单板',
            url: '#',
            jj: '铝单板雕刻花格,立体铝单板雕刻花格已不再是一种简单的装修材料,而是一种精美的艺术装饰品,浮雕铝单板成为代表富贵身价,豪华气派的风景线!采用技术研制开发的铜艺整体雕花护栏。铝单板雕刻护栏、多种系列产品,以它独',
            titlepic: '/d/file/p/2023/05-30/a4c020b60c47669ae664f57e40726e70.jpg',
          },
        ],
      };
    },
    computed: {
      uniqueCp() {
        const set = new Set();
        return this.cp.filter((item) => {
          if (set.has(item.name)) {
            return false;
          }
          set.add(item.name);
          return true;
        });
      },
    },
  };
</script>

上面的代码中，定义了一个计算属性 uniqueCp，利用 Set 对象来记录数组中已经出现过的 name 值，然后在过滤数组时判断当前 name 值是否已经出现过，如果出现过则返回 false，否则将当前 name 值添加到 Set 对象中并返回 true，最终得到的就是一个没有重复 name 值的新数组。在模板中使用 v-for 遍历这个新数组，就可以达到判断数组中是否有重复值的效果。

**代码解释：**

• uniqueCp 计算属性：用于获取去重后的数组。
• Set 对象：用于存储已出现过的 name 值。
• filter 方法：用于过滤数组，保留唯一的值。
• has 方法：用于判断 Set 对象中是否包含某个值。
• add 方法：用于将值添加到 Set 对象中。

通过这种方式，可以有效地判断数组中是否存在重复值，并使用 v-for 遍历去重后的数组，实现预期效果。