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

<template>
  <div>
    <ul>
      <li v-for='(item, index) in items' :key='index' v-if='isUnique(item)'>
        {{ item }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 2, 4, 5, 4],
    };
  },
  methods: {
    isUnique(value) {
      return this.items.filter((item) => item === value).length === 1;
    },
  },
};
</script>
<p>在上面的代码中，我们使用了 v-for 来遍历 items 数组，并使用 v-if 指令来判断当前的 item 是否唯一。通过调用 isUnique 方法，我们使用 Array 的 filter 方法来筛选出与当前 item 相同的元素，并返回一个新的数组。然后我们判断这个新数组的长度是否为 1，如果是 1 则表示当前 item 是唯一的，我们就展示它，否则不展示它。</p>