- 有那种前几个样式和后面几个样式不一样时,可以使用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>
- 在嵌套循环中要注意,第二层嵌套是循环的上一个循环的每一项
<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>
- 在处理数据时,首先看数据原本是什么样的,然后再看自己需要什么样的数据,最主要的就是使用forEach,和for in ,forEach循环数组,for in循环对象。
o.name = key; //key表示键名
const element = obj[key]; //表示键值
- 在写css样式的时候善用flex布局,这样可以节省很多时间,并且让代码更加简洁
display: flex;
justify-content: space-around; //将下面的div平均分
flex-direction: column; //指定在上面方向上做什么事情(column:在列的方向)
justify-content: space-around; //每个项目两侧的间隔相等
justify-content: space-between; //两端对齐,项目之间的间隔都相等。
align-items: center //垂直居中
- 可以使用calc来计算宽度和高度,自适应!
height: calc(100% - 31% - 19px);