在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>