<template>
<div>
<div
v-for="item in list"
:key="item.id"
class="div"
@click="handleFn(item)"
>
{{ item.name }}
</div>
<br />
<!--:key="`${item.value}_${index}`"是为了 v-for循环里绑定的key出现报错问题 -->
<div
v-for="(item, index) in hotList"
:key="`${item.value}_${index}`"
class="div"
>
{{ item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, name: "one" },
{ id: 2, name: "two" },
{ id: 3, name: "three" },
{ id: 4, name: "four" },
{ id: 5, name: "five" },
],
hotList: [],
};
},
methods: {
handleFn(setObj) {
this.hotList = JSON.parse(localStorage.getItem("hotList")) || [];
if (setObj) setObj.num = 0; //给setObj对象添加num属性，同时赋值
function setFn(newList, setObj) {
newList.length ? newList : newList.push(setObj);
for (let index = 0; index < newList.length; index++) {
// 判断当前遍历到对象的id属性值是否等于setObj中的id,
// 如何数组中的对象不存在该id，则向数组插入setObj,同时num=1
newList[index].id === setObj.id
? newList[index].num++
: newList.push({ ...setObj, num: 1 });
}
// 根据不同对象中的num值大小，对数组重新排序
newList.sort((a, b) => b.num - a.num);
return newList;
}
this.hotList = setFn(this.hotList, setObj);
localStorage.setItem("hotList", JSON.stringify(this.hotList));
},
},
};
</script>
<style>
.div {
width: 100px;
border: 1px solid black;
}
</style>
如果觉得《js\vue 在数组中动态插入对象和添加修改某一个对象的属性值》对你有帮助，请点赞、收藏，并留下你的观点哦！
