style绑定获取data中的图片作为背景图

最新推荐文章于 2024-08-19 22:06:15 发布

原创最新推荐文章于 2024-08-19 22:06:15 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍如何使用Vue.js在HTML中通过数据驱动动态设置<ul>元素的背景图片，展示了如何利用<liv-for>指令遍历productBGImges数组，并设置了每个<li>元素的样式。通过varsyLayout组件，实现了产品背景图片的灵活切换。

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

HTML

<ul>
		<li v-for="item in productBGImges" :key="item" :style=" {backgroundImage:' url( ' + item.url + ') ' } "></li>
</ul>

script

var syLayout = new Vue({
	el:'#web-layout',
		data(){
			return{
				productBGImges:[
	                 { url: "img/sy-productBG-01.png"},
	                 { url: "img/sy-productBG-02.png"},
	                 { url: "img/sy-productBG-03.png"},
	                 { url: "img/sy-productBG-04.png"},
	                 { url: "img/sy-productBG-05.png"},
	                 { url: "img/sy-productBG-06.png"},
	                 { url: "img/sy-productBG-07.png"},
	       		],
			}
		}
})