Vue中v-for中动态字符串拼接

一.img中的src的字符串动态拼接

方法一(你可以这样写)
<ul>
    <li v-for='item in weatherArr'>
          ![]('http://openweathermap.org/img/w/'+item.weather[0].icon+'.png')
      </li>
  </ul>


方法二(你还可以这样写:es6的语法)

    <ul>
        <li v-for='item in weatherArr'>
            <img :src=`http://openweathermap.org/img/w/${item.weather[0].icon}.png`>
          </li>
  </ul>
二.style中通过background设置背景图片
写法和上面类似,就是拼接字符串,直接上代码吧

    <ul>
        <li class="imgStyle" v-for='item in items' :style="{background:'url('+item.imgURL+')'}"></li>
     </ul>
posted @ 2024-02-25 02:53  NewJersey  阅读(545)  评论(0)    收藏  举报