今天,在用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>