Vue 使用:style 内联样式设置背景样式

博客围绕在Vue中动态设置背景图片样式展开。博主想给div动态设置从网络获取的可变url背景图片,介绍可使用Vue提供的:style属性,该属性既可以是css属性,也能自定义对象并在其中设置属性。

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

先说一句Vue 太强了。

我要给下面这个 div 动态设置背景图片,而图片的url 是从网络上动态获取的,也就是说 url 是可变的

<div></div>

怎么设置呢?
使用 vue 提供的 :style 属性,这个属性可以是 css 里面的属性,也可以是你自定义一个对象,然后再对象里设置属性:

//这里的background就是一个属性的对象
<div :style="background"></div>

export default {
 ......
 data(){
	 return {
 	    	//动态url,
	 	    backgroundImgUrl:"你的图片地址"
	    }
     },
     //一定要在 computed 里定义 background 才能引用的到 backgroundImgUrl,
     //原因嘛:可能是 backgroundImgUrl 是在data 里可变的,所以需要computed计算使用
     computed:{
 		    background:function(){
                 return {
           		 backgroundImage:"url("+this.backgroundImgUrl+")",
            	 backgroundRepeat:'no-repeat',
           		 backgroundSize:"cover",
           		 backgroundPosition:"center center"
          		}
        	}
        }
	}
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值