vue动态添加背景图简单示例
更新时间：2023年07月27日 11:24:25 作者：68.
这篇文章主要给大家介绍了关于vue动态添加背景图的相关资料,在一些场景下我们需要使用户可以进行自定义背景图片,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
VUE中在for循环中给每一项设置动态style背景图
VUE项目中时常会有需求，对一个数组进行循环渲染，并对其中的每一项给不同的背景图片。 首先考虑用到动态style，根据循环中的index变化改变背景图片地址。
一个简单的例子：
简便写法，直接内嵌html样式
<li v-for="(item,index) in list" :key="index">
<div class="img-content">
<div class="bagimg bagimg_one" v-if="index == '0'"></div>
<div class="bagimg bagimg_two" v-if="index == '1'"></div>
<div class="bagimg bagimg_three" v-if="index == '2'"></div>
<div class="bag_img" v-if="index>2" :style="{'background-image':`url(${require(`./assets/ranking${index+1}.png`)}`}"></div>
</div>
</li>另一种方法，也可以在方法里处理其他逻辑
html中代码如下：
<div class="bag_img" v-for="(item,index) in list" :key="index" :style="{'background-image':`url(${getImageUrl(index)})`}" >{{item}}</div>JS中代码如下：
<script>
export default {
//****省略
methods:{
getImageUrl(index) {
// 根据索引生成图像URL
return require(`@/assets/ranking${index+1}.png`);
},
}
};
</script>需要注意，返回的地址外层需要调用require方法，否则webpack打包后会拿不到图片地址，如果是http网络地址则不需要调用该方法。
总结
到此这篇关于vue动态添加背景图的文章就介绍到这了,更多相关vue动态添加背景图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
最近开发项目是学校校内车辆超速方面的统计检测方面的系统,在开发过程中发现有个小功能,就是用户移动端添加车牌号,刚开始想着输入框,提交时正则效验一下格式,最后感觉不方便,所以就简单自己手写了一个H5车牌号软键盘,对vue车牌号输入框实现代码感兴趣的朋友一起看看吧2025-03-03
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
这篇文章主要介绍了vue使用svg文件补充-svg放大缩小操作(使用d3.js)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
关于vue的npm run dev和npm run build的区别介绍
这篇文章主要介绍了关于vue的npm run dev和npm run build的区别介绍，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
今天小编就为大家分享一篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了vue设计与实现合理的触发响应示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue element 生成无线级左侧菜单的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
vue前台显示500和405错误的解决(springboot为后台)
这篇文章主要介绍了vue前台显示500和405错误的解决(springboot为后台)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue如何点击多个tab标签打开关闭多个页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了写一个Vue Popup组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要为大家介绍了vue中filter的应用场景，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
最新评论