vue绑定background_vue2绑定内联样式background的一些坑

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

正常情况下的vue内联样式如下写法：

data: {

activeColor: 'red',

fontSize: 30

}

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

data:{

img:'xxx.png'

}

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

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

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