Vue.js 如何使用 v-for 和 v-if 过滤数组中的重复值

<template>
  <div>
    <div v-for="(item, index) in cp" :key="index">
      <div v-if="!isDuplicate(item, index)">
        <h3>{{ item.name }}</h3>
        <p>{{ item.jj }}</p>
        <img :src="item.titlepic" alt="">
      </div>
    </div>
  </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',
        },
      ],
    };
  },
  methods: {
    isDuplicate(item, index) {
      for (let i = 0; i < this.cp.length; i++) {
        if (i !== index && item.name === this.cp[i].name) {
          return true;
        }
      }
      return false;
    },
  },
};
</script>
<p>在上面的代码中，我们使用了一个 <code>isDuplicate</code> 方法来判断当前循环的 <code>item</code> 是否是重复的。该方法会遍历整个数组，如果有重复值则返回 <code>true</code>，否则返回 <code>false</code>。在模板中，我们使用 <code>v-if</code> 条件来判断是否需要输出当前 <code>item</code>。如果 <code>isDuplicate</code> 返回 <code>true</code>，则不输出；否则输出。</p>