消费平台遇到的问题及一些小收获

1. 有那种前几个样式和后面几个样式不一样时，可以使用if，else-if来进行判断显示：
   

<li v-for="(item,i) in WindowsVal" :key="i">
  <img v-if="i == 0" src="@/assets/image/top.png" />
  <img v-else-if="i == 1" src="@/assets/image/two.png" />
  <img v-else-if="i == 2" src="@/assets/image/three.png" />
  <p class="pTop" v-else>{{(i+1)}}</p>
  <p>{{item.DevicesName}}</p>
  <span>{{item.ConsumerAmount }}</span>
</li>

2. 在嵌套循环中要注意，第二层嵌套是循环的上一个循环的每一项

<swiper-slide v-for="(item, i) in CanteenAndShopConsumeRateData" :key="i">
  <div class="charts-template"  @click="showPop('charts', item.schoolName, 'pie', item.data)">
  	  //这里的item，就是CanteenAndShopConsumeRateData循环出来的每一项
      <charts :title="item.schoolName" :type="'pie'" :chartData="item.data"></charts>
  </div>
  <div class="school-name">
      {{item.schoolName}}
  </div>
</swiper-slide>

3. 在处理数据时，首先看数据原本是什么样的，然后再看自己需要什么样的数据，最主要的就是使用forEach，和for in ，forEach循环数组，for in循环对象。

o.name = key;   //key表示键名
const element = obj[key];    //表示键值

4. 在写css样式的时候善用flex布局，这样可以节省很多时间，并且让代码更加简洁

    display: flex;
    justify-content: space-around;   //将下面的div平均分
    flex-direction: column;     //指定在上面方向上做什么事情（column：在列的方向）
    justify-content: space-around;    //每个项目两侧的间隔相等
    justify-content: space-between;    //两端对齐，项目之间的间隔都相等。
    align-items: center    //垂直居中

5. 可以使用calc来计算宽度和高度，自适应！

height: calc(100% - 31% - 19px);