此时我有一个需求,给一个盒子添加一个背景图片,这个背景图片是动态请求回来的,那么应该怎么做?看似简单,其实很考研对JavaScript基础的功底以及对vue生命周期的理解。
正常情况下的vue内联样式如下写法:
1 2 3 4 5
| <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 }
|
此时的style绑定的是一个JavaScript对象,在JavaScript中不允许出现 “-“ ,那么绑定一个背景图片应该这么写:
1 2 3 4
| <div :style="{background: 'url('+ img +')',backgroundSize:cover }"></div> data:{ img:'xxx.png' }
|
好了背景图片已经成功通过字符串拼接的方式加上了,我们改为动态请求回来的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| <div :style="{background: 'url('+ img +')',backgroundSize:cover }"></div> data:{ img:'xxx.png' }, methods:{ getImg(){ this.$http.get().then(function (e) { this.img = e.data }.bind(this)) } }, created(){ this.getImg() }
|
created vue2生命周期钩子函数
在实例创建之后同步调用。此时实例已经结束解析选项,这意味着已建立:数据绑定data,计算属性computed,方法methods,watcher/事件回调。
此时你会发现虽然渲染了出来,但是报错了
1 2
| Error in render function Cannot read property 'img' of undefined
|
因为在生命周期 mounted 之前都是虚拟dom 也就是说 当页面已经渲染完,但是vue还没执行,所有数据丢失,此时我们加上
1
| <div v-if='img ' :style="{background: 'url('+ img +')',backgroundSize:cover }"></div>
|
表示有img属性的时候我们选择这个元素,至此就成功绑定背景图片了。