今天，在用vue-cli做一個項目得時候，遇到一個小問題，所以 背景圖片background 都是動態(tài)請求數(shù)據(jù)過來，而且還需要拼接，看似很簡單，其實很考驗javascript基礎(chǔ)的功底，以及對vue的理解，具體怎么操作呢，我們往下看：
正常background的寫法

<div style='background:url(./img/tu.png)'></div>

但是動態(tài)的背景圖怎么寫呢：

<div v-for='item in data'>
  <div :style="{ background: 'url(' + item.img + ')' }"></div>
:style 綁定動態(tài)數(shù)據(jù)，{}引用動態(tài)數(shù)據(jù)， 不變的部分用 引號引住， 動態(tài)的部分不要用引號 中間用 + 號拼接起來
</div>

接下來，再給大家演示一下我的案例，每張圖片的鏈接前面都有一個前綴，后面的部分是通過數(shù)據(jù)動態(tài)請求回來的：

<div v-for='item in data'>
 <div :style = " { background: 'url(www.aizhoujin.top/image/' + item.img+ ')' } ">text</div>
</div>

其實請求動態(tài)數(shù)據(jù)的傳回來的背景顏色也是一樣的

<div v-for='item in data'>
 <div :style = " { background: '#' + item.icon_color + ' '}">text</div>
 請求動態(tài)的背景顏色，最后要在拼接一下
</div>