在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
}
}
2.在需要使用的文件中,通过new info()即可
import {info} from 'js文件路径'
.
.
.
<script>
export default{
data:()=>{
return{
mylist:[]
}
},
methods:{
//假设list数据已在某个地方获取了
addlist(){
this.mylist=new info(list)
}
}
}
</script>