Vue.js 如何使用 v-for 和 v-if 过滤重复数据项

可以使用一个对象来存储已经出现过的产品名称，然后在 v-for 中使用 v-if 判断当前产品名称是否已经出现过，如果没有则显示该产品信息，并将该产品名称添加到对象中。

代码示例：

<template>
  <div>
    <div v-for="item in cp" :key="item.name" v-if="!displayed[item.name]">
      <h3>{{ item.name }}</h3>
      <p>{{ item.jj }}</p>
      <img :src="item.titlepic" alt="">
      <a :href="item.url">查看详情</a>
    </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'},   
      ],
      displayed: {}
    }
  },
  mounted() {
    for (let item of this.cp) {
      this.displayed[item.name] = false;
    }
  }
}
</script>

在 mounted 钩子函数中，初始化 displayed 对象，将所有产品名称设置为未出现过。在 v-for 循环中，使用 displayed 对象来判断该产品名称是否已经出现过，如果没有，则显示该产品信息，并将该产品名称添加到 displayed 对象中。这样就可以实现重复值只显示一次的效果。