今天，在用vue-cli做一个项目得时候，遇到一个小问题，所以 背景图片background 都是动态请求数据过来，而且还需要拼接，看似很简单，其实很考验javascript基础的功底，以及对vue的理解，具体怎么操作呢，我们往下看：
正常background的写法

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

但是动态的背景图怎么写呢：

<div v-for='item in data'>
  <div :style="{ background: 'url(' + item.img + ')' }"></div>
:style 绑定动态数据，{}引用动态数据， 不变的部分用 引号引住， 动态的部分不要用引号 中间用 + 号拼接起来
</div>

接下来，再给大家演示一下我的案例，每张图片的链接前面都有一个前缀，后面的部分是通过数据动态请求回来的：

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

其实请求动态数据的传回来的背景颜色也是一样的

<div v-for='item in data'>
 <div :style = " { background: '#' + item.icon_color + ' '}">text</div>
 请求动态的背景颜色，最后要在拼接一下
</div>