仿美团外卖开发笔记（二）

• 这一节主要是对图片中构造的记录

利用Vant组件库，然后用v-for将相关数据渲染到界面上。

 <van-tabs  class="vant-tabs" >
   <van-tab v-for="(i,index) in  centent_nav_list" :title="i.tab" :key="index">
   <Store :store_list='i.data'></Store>
  </van-tab>
</van-tabs>

新建Store和StreItem复用组件(只需要建立一个相关的复用组件，便可以在使用的时候，利用父组件传子组件，进行数据传递，然后将数据渲染到相关页面上)，它代表：

• Store组件主要内容

  <div v-for="(i,index) in store_list" :key="index" class="store_list_item">
      <StoreItem  :item="i"></StoreItem>
  </div>
  

• StreItem组件主要内容

   <div class="item"  @click="toStore">
   <img :src="item.pic" />
   <div class="item_right">
   <div class="title">{{item.title}}</div>
   <div class="sales">{{item.sales}}</div>
     <div class="price">起送费￥{{item.sales}}免配送费</div>
   <div class="label">
       <div v-for="(i,index) in item.label" :key="index">{{i}}</div>
  </div>
      </div>
      </div>`
  

• 总结：这一节主要记录将数据渲染到相关页面，其中运用到父传子，进行数据传递，v-for进行循环遍历。