vue动态绑定background的方法
background是background-color，background-image，background-repeat，background-attachment，background-position，background-size等属性的缩写。
这篇文章我用动态绑定background-image来举例。
我们都知道普通的css中写background-image是这样的：
background-image: url("http://www.jb51.net/javascript/登录页bg.png");
但在vue中用style写background-image时无法显示：
为什么呢？答：因为这样写url会被解析成字符串，取不出来，所以需要动态的绑定，以下有三种写法：
写法一：
:style="{ backgroundImage: `url(${require('http://www.jb51.net/javascript/登录页bg.png')})` }">
写法二：
class="login-container" :style="{ backgroundImage: loginBackEcho.fileContext ? `url(${loginBackEcho.fileContext})` : `url(${loginUrl})`, }" >
// 简写script：
props: {
loginBackEcho: {
type: Object,
default: () => {},
},
},
data() {
return {
loginUrl: require("http://www.jb51.net/javascript/登录页bg.png"),
};
}
写法三：
class="login-container" :style="{ backgroundImage: `url(${imgss})` }" >