Vue2 绑定内联样式 Background 的一些坑

Question

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

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

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

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

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

<div :style="{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 还没执行，所有数据丢失，此时我们加上

<div v-if='img ' :style="{background: 'url('+ img +')'，backgroundSize:cover }"></div>

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