在Vue中，数组去重可以通过多种方式实现，以下是3种常见的方法：
- 使用
Array.prototype.filter方法和Array.prototype.indexOf方法。 - 使用
Array.prototype.reduce方法。 - 使用
Set对象。
方法1：filter + indexOf
methods: {
uniqueByFilter(arr) {
return arr.filter((item, index, self) => self.indexOf(item) === index);
}
}方法2：reduce
methods: {
uniqueByReduce(arr) {
return arr.reduce((accumulator, current) => {
if (accumulator.indexOf(current) === -1) {
accumulator.push(current);
}
return accumulator;
}, []);
}
}方法3：Set
methods: {
uniqueBySet(arr) {
return [...new Set(arr)];
}
}在Vue组件中使用时，可以这样调用：
<template>
<div>
<p>原数组: {{ items }}</p>
<p>去重后: {{ uniqueItems }}</p>
</div>
</template>
<script>
export default {
data() {
return {
items: [1, 2, 2, 3, 4, 4, 5]
};
},
computed: {
uniqueItems() {
// 使用上面定义的任一去重方法
return this.uniqueBySet(this.items);
}
}
};
</script>以上代码展示了如何在Vue组件中定义计算属性来去重数组，并在模板中展示结果。