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

最新推荐文章于 2025-05-13 09:54:01 发布

原创最新推荐文章于 2025-05-13 09:54:01 发布 · 7.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #设置样式 #Vue内联样式

Vue 专栏收录该内容

4 篇文章

订阅专栏

博客围绕在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"
          		}
        	}
        }
	}
 }