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文件路径' . . .

    推荐阅读