- <div class="everyLeft" :style="item" v-for="(item,index) in note" :key="index">
- <p class="RealTimeDataFirst">
- {{item.title}}
- </p>
- <p class="RealTimeData">
- <span class="left_title">
- 大气压力:
- </span>
- 80 kpa
- </p>
- <p class="RealTimeData">
- <span class="left_title">
- PM 2.5:
- </span>
- 800 ug/m3
- </p>
- <p class="RealTimeData">
- <span class="left_title">
- PM 10:
- </span>
- 900 ug/m3
- </p>
- </div>
data 里面数据:
- note: [{
- title: "(3 月 31 日) 前天",
- backgroundImage: "url(" + require("@/assets/common_images/left2.png") + ")",// 路径要这样请求
- backgroundRepeat: "no-repeat",
- backgroundSize: "cover",
- color: "#19D3D6"
- },
- {
- title: "(4 月 1 日) 昨天",
- backgroundImage: "url(" + require("@/assets/common_images/center2.png") + ")",
- backgroundRepeat: "no-repeat",
- backgroundSize: "cover",
- color: "#7798FF"
- },
- {
- title: '(4 月 2 日) 今天',
- backgroundImage: "url(" + require("@/assets/common_images/right2.png") + ")",
- backgroundRepeat: "no-repeat",
- backgroundSize: "cover",
- color: "#D4AAFF"
- }
- ],
- so easy!
来源: http://www.jianshu.com/p/eb5ed9da775b