vue中大量数据的处理小技巧
在vue中进行数据渲染时,数据量小时,通常直接{{}}即可,当数据量较大,如果直接在data里保存,会显得很杂乱,就可以使用如小技巧让代码看上去更规整。
举个例子,要访问的数据为:
list:{
acm: "3.ms.0_4_1m9"
cfav: 0
clientUrl: "http://123"
cparam: null
iid: "1m93p4u"
itemMarks: "-1"
itemType: 5
leftbottom_taglist: Array(0)
lefttop_taglist: Array(0)
link: "http://123"
orgPrice: "¥140.00"
popularStar: 0
price: "98.00"
props: Array(1)
ptpC: "_mb_mls_10057922_wap-index_noab-noab"
sale: 0
shopId: 107897
show: Object
showLarge: Object
title: "hehehe"
titleTags: null
type: 2
}
但是只需要一部分的数据展示,如iid,link,orgPrice,title
1.新建一个js文件,将数据写在class里整合,并export出去
export class info(){
constructor(list){
this.iid=list.iid
this.link=list.link
this.orgPrice=list.orgPrice
this.title=list.title
}
}
【vue中大量数据的处理小技巧】2.在需要使用的文件中,通过new info()即可
import {info} from 'js文件路径'
.
.
.
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中,逐渐适应一个人到底意味着什么()
- vue-cli|vue-cli 3.x vue.config.js 配置
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- “成长”读书社群招募