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

可以使用一个 computed 属性来判断数组中是否有重复值，然后在 v-for 中使用 v-if 来过滤掉重复值。

例如：

<template>
  <div>
    <div v-for="item in uniqueCp" :key="item.name">
      <!-- 显示不重复的数据 -->
    </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'},   
        ]
    }
  },
  computed: {
    uniqueCp() {
      const unique = []
      const names = []
      for (const item of this.cp) {
        if (!names.includes(item.name)) {
          unique.push(item)
          names.push(item.name)
        }
      }
      return unique
    }
  }
}
</script>

在上面的代码中，我们使用一个 computed 属性来计算不重复的数据 uniqueCp。在这个计算属性中，我们使用一个数组 names 来存储已经出现过的 name 值，如果当前的 item.name 值已经在 names 数组中出现过了，那么就跳过这个 item；否则就将这个 item 加入 unique 数组中并将它的 name 值加入 names 数组中。最后，我们将 unique 数组返回给 v-for 来显示不重复的数据。