vue2绑定内联样式background的一些坑

此时我有一个需求，给一个盒子添加一个背景图片，这个背景图片是动态请求回来的，那么应该怎么做？看似简单，其实很考研对JavaScript基础的功底以及对vue生命周期的理解。
正常情况下的vue内联样式如下写法：

"{ color: activeColor, fontSize: fontSize + 'px' }">div>
data: {
  activeColor: 'red',
  fontSize: 30
}

此时的style绑定的是一个JavaScript对象，在JavaScript中不允许出现 "-" ，那么绑定一个背景图片应该这么写：

"{background: 'url('+ img +')'，backgroundSize:cover }">div>
data:{
  img:'xxx.png'
}

好了背景图片已经成功通过字符串拼接的方式加上了，我们改为动态请求回来的。

"{background: 'url('+ img +')'，backgroundSize:cover }">div>
data:{
    img:'xxx.png'
},
methods:{
// 伪代码 请求数据
      getImg(){
        this.$http.get().then(function (e) {
          this.img = e.data //将数据赋值给img
        }.bind(this))
      }
}，
created(){
// 调用函数
    this.getImg()
}

created vue2生命周期钩子函数
在实例创建之后同步调用。此时实例已经结束解析选项，这意味着已建立：数据绑定data，计算属性computed，方法methods，watcher/事件回调。
此时你会发现虽然渲染了出来，但是报错了

Error in render function
Cannot read property 'img' of undefined

因为在生命周期 mounted 之前都是虚拟dom 也就是说 当页面已经渲染完，但是vue还没执行，所有数据丢失，此时我们加上

if='img ' :style="{background: 'url('+ img +')'，backgroundSize:cover }">

表示有img属性的时候我们选择这个元素,至此就成功绑定背景图片了。

作者：宇cccc
链接：https://www.jianshu.com/p/57d913f50439
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。