Vue使用:内联style动态绑定backgroundImage/background

1.直接在vue中使用style内联样式设置background或backgroundImage是无效的；比如这样写无效：

 内容。。。

2.必须使用拼接；但是直接拼接也是无效的；比如这样写无效：

 内容。。。data(){return {bgImage: '../../assets/import/aa1.png'}}

3.必须需要require引入才可以进行拼接：以下是正确方法：

 内容。。。data(){return {bgImage: require('../../assets/import/aa1.png')}}

4.注意这样拼接也是无效的：

 内容。。。data(){return {bgImage: require('../../assets/import/aa')}}

补充：除了这种拼接方法，你也可以这样写：

export default {data () {return { backgroundDiv: {backgroundImage: 'url(' + require('../assets/images/1.jpg') + ')',}}}}.background-img {background: no-repeat center top;background-size: contain;height: 150px;}

以上是vue2的方法，后期继续分享vue3的动态绑定background属性的方法