Vue 使用:style 内联样式设置背景样式
先说一句Vue 太强了。我要给下面这个 div 动态设置背景图片,而图片的url 是从网络上动态获取的,也就是说 url 是可变的<div></div>怎么设置呢?使用 vue 提供的 :style 属性,这个属性可以是 css 里面的属性,也可以是你自定义一个对象,然后再对象里设置属性://这里的background就是一个属性的对象<div :sty...
·
先说一句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"
}
}
}
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)