Vue 数组相关
2020-10-16 本文已影响0人
三月木头
1.如何对数组进行插入或删除
splice
- Vue数组中存对象
private collectArray:any[] = [
{name:'BTCUSD',collected:true},
{name:'ETHUSD',collected:true},
{name:'EOSUSD',collected:true},
{name:'LINKUSD',collected:true},
{name:'TRXUSD',collected:true},
{name:'DOTUSD',collected:true}
];
- 关于绑定方法,方法里面传递对象数据
<div v-on:click.stop="clickStarParass(collectItem)" :key="collectItem" class="all_collect_star">
- js中数组如何进行遍历
let collectArray = new Array();
this.collectArray.map(item => {
if(item.collected) {
var symbol = "X" + item.name;
this.$store.commit('updateCollectSymbol',symbol);
collectArray.push(symbol);
}
});
-
Js的语言特点
数据特点,不需要声明任何属性,可以直接拿来用。 -
Vue 是数据驱动,为啥localStorage.getItem 数据变化不能自动更新Dom
数据驱动 也就是 数据变化Dom会相应变化,但是这是基于内存状态,如果数据存储在磁盘那么就不行了。存入磁盘的数据是不能不停的读取的。
我们需要做的是在vue 的 store 层面的modules层面做处理
export default {
state: {
isShowDefaultCollectInfo: localStorage.getItem('hideFirstShowCollect') == 'true' ? true: false
},
mutations: {
setHomeIsShowDefaultCollectInfo(state:any, isShowDefault:boolean) {
state.isShowDefaultCollectInfo = isShowDefault;
localStorage.setItem('hideFirstShowCollect',isShowDefault.toString())
}
}
getters: {
homeIsShowDefaultCollectInfo(state:any) {
return state.isShowDefaultCollectInfo;
}
}
}
用法:
//保存首次 自选 展示记录
saveCollectInfo(value:string) {
this.$store.commit("setHomeIsShowDefaultCollectInfo", value == 'true'? true: false);
}
//获取是否展示 自选 展示记录
get getCollectInfo():any {
return this.$store.getters.homeIsShowDefaultCollectInfo;
}