美文网首页Web前端之路
vue动态循环背景图片

vue动态循环背景图片

作者: 实质xing | 来源:发表于2020-04-13 09:46 被阅读0次

    <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&nbsp;&nbsp;&nbsp;&nbsp;2.5:</span>800 ug/m3</p>

                  <p class="RealTimeData"><span class="left_title">PM&nbsp;&nbsp;&nbsp;&nbsp;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!

    相关文章

      网友评论

        本文标题:vue动态循环背景图片

        本文链接:https://www.haomeiwen.com/subject/ojgwmhtx.html