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