v-for动态图片列表展示以及动态给div添加背景图片

最新推荐文章于 2023-07-20 09:14:04 发布

小、样

最新推荐文章于 2023-07-20 09:14:04 发布

阅读量2.2k

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_52563146/article/details/119205017

版权

前端专栏收录该内容

23 篇文章

订阅专栏

本文展示了如何在Vue.js中使用v-for指令动态渲染图片列表，并通过内联样式动态设置div背景图片。通过数据绑定，实现了每个列表项的背景图片和文字内容的展示。同时，CSS代码确保了布局的美观和响应式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-for动态图片列表以及动态给div添加背景图片方法

效果如下图所示：

在这里插入图片描述

HTML:

<div class="branchWorkshop">
	 <ul>
		 <li v-for="(item,i) in workShopList" :key="i">
			<div class="workshopImg" 
			:style="{ 'background-image': 'url(' + item.imgUrl + ')',
			'background-repeat':'no-repeat','background-size':'cover'}">
			</div>
			<span style="color:white">{{item.label}}</span>
		</li>
	 </ul>
</div>

JS:

<script>
export default {
    data(){
        return{
        	workShopList:[{
				id: 1
				imgUrl: "/static/manyou/ws.png"
				label: "demo"
        	},{
				id: 2
				imgUrl: "/static/manyou/zz.png"
				label: "demo"
        	},{
	        	id: 3
				imgUrl: "/static/manyou/ym.png"
				label: "demo"
        	},{
	        	id: 4
				imgUrl: "/static/manyou/zxn.png"
				label: "demo"
        	},{
	        	d: 5
				imgUrl: "/static/manyou/ns.png"
				label: "demo"
        	},
        	{
	        	d: 6
				imgUrl: "/static/manyou/wm.png"
				label: "demo"
        	}
        	
        	]
        }
    }
}
</script>

CSS:

<style>
.branchWorkshop{
  width: 400px;
  height: 650px;
  overflow: hidden;
}
.branchWorkshop ul{
  display: flex;
  width: 90%;
  height: 100%;
  margin:0;
  padding:0;
  flex-wrap: wrap;
  /* 垂直居中 */
  align-items: center;
  /* ul里面的字体图片水平居中 */
  text-align:center; 
  /* ul盒子里面的内容水平居中 */
  margin:0 auto;  
}
.branchWorkshop li{
  width: 30%;
  height: 15%;
  list-style: none;
  /* li在ul里面水平居中 */
  margin:0 auto;
  margin-right: 2%;
 
}
.workshopImg{
  width: 100%;
  height: 100%;
}
</style>

总结：
动态给元素添加背景图片的方法：

<div class="workshopImg" 
	:style="{ 'background-image': 'url(' + item.imgUrl + ')',
	'background-repeat':'no-repeat','background-size':'cover'}">
</div>