vue Map的用法以及map更新后不重新渲染页面问题
map的用法以及map更新后不重新渲染页面的问题
·
一、set(添加)
//myMap.set(key, value);
//若是同一个键被赋值了多次,后面的会覆盖之前的值
var myMap = new Map(); //创建map对象
1. 添加数据
myMap.set(keyString, "和键'a string'关联的值");
2.循环添加数据
for (var i = 0; i < this.tableData.length; i++) {
let n = this.tableData4[i].Id + '-' + this.tableData4[i].name
this.myMap .set(n, this.tableData[i].bdwant)
}
3.添加对象(添加同一个keystring,不同对象的话直接更新后者)
myMap.set(keyString, {name:"和键'a string'关联的值"});
二、get(查找)
this.myMap .get(keyString)
三、has(返回是否存在)
//返回值:布尔值,若存在于Map中,则返回true
myMap.has(arr) //true
四、delete(删除)
myMap.delete(key);
五、clear(清除所有)
map.clear()
六、key与valus
var map = new Map()
.set('aa',11)
.set('bb',22)
for(let key of map.keys()){
console.log(key)
}
//aa
//bb
for(let value of map.values()){
console.log(value)
}
//11
//22
//普通js写 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach(function(value, key) {
console.log(key + " = " + value);
}, myMap)
//箭头函数写: 将会显示两个 logs。 一个是 "0 = zero" 另一个是 "1 = one"
myMap.forEach((value, key) => {
console.log(key + " = " + value);
});
七、map的合并、转换
// 合并两个 Map 对象时,如果有重复的键值,则后面的会覆盖前面的,对应值即 uno,dos, three
var merged = new Map([...first, ...second]);
//map转数组
例:
var map = new Map()
.set('aa',11)
.set('bb',22)
.set('cc',33)
1. [...map] // [ ['aa',11],['bb',22],['cc',33] ]
2.[...map.keys()] // ["aa", "bb", "cc"]
3.[...map.values()] // [11, 22, 33]
4.Array.from(this.mapbasicList.values())
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
map更新后不重新渲染页面问题
<el-row :gutter="12">
<el-col class="m10-right1" :span="8" v-for="items in baseList2" :key="items.id">
</el-col>
</el-row>
data () {
return {
myMapChangeTrucher:0,
mapbasicList:new Map(),//存放基站基本信息的map
};
},
methods: {
getBaseData(ret){
this.mapbasicList.set(ret.baseId,ret)
this.myMapChangeTrucher+=1 //改变参数
},
}
computed:{
//使用计算属性将map装换为显示的列表
baseList2() {
var x=this.myMapChangeTrucher //监听到参数的变化 并改变map
return Array.from(this.mapbasicList.values())
}
}
(升级:同上只需要在计算属性中添加一些代码)当有两个map,key相同,需要组合一起使用时:
computed:{
//使用计算属性将map装换为显示的列表
baseList2() {
var x=this.myMapChangeTrucher //监听到参数的变化 并改变map
var arr=[] //返回列表的数组
this.mapstateList.forEach(element => {
element.online=this.mapOnline.get(element.bsid) //将在线不在线的数据循环添加到map的新字段中
arr.push(element)
});
return arr
// return Array.from(this.mapbasicList.values())
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)