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

先说一句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"
          		}
        	}
        }
	}
 }
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值