vue動態綁定src加字符串拼接

關鍵點

• 1.img中的src的字符串動態拼接
• 2.style中的background屬性賦值   

一.img中的src的字符串動態拼接

• 1.問題是這樣子的,瞧瞧
  基本網絡鏈接 : http://openweathermap.org/img/w/02n.png ; 但是了字符'02n'是動態的,切換它可以獲取不同的天氣圖片,如果這樣的鏈接在vue的v-for中該如何拼接字符串了,下解:

• 2.解決這個問題

  • 方法一(你可以這樣寫)、

  <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>