先说一句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"
          		}
        	}
        }
	}
 }
Logo

前往低代码交流专区

更多推荐