vue动态绑定background的方法
更新时间：2023年10月30日 17:15:34 作者：程琬清君
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧
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,
}
}到此这篇关于vue动态绑定background的文章就介绍到这了,更多相关vue动态绑定background内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在vue项目中怎么获取当前鼠标划过的坐标呢？下面通过本文给大家分享实现步骤，感兴趣的朋友跟随小编一起看看吧2021-11-11
这篇文章主要介绍了vue在手机中通过本机IP地址访问webApp的方法,需要的朋友可以参考下2018-08-08
这篇文章主要为大家介绍了羊了个羊通关脚本Vue node实现版本，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家详细介绍了利用vue的监听事件实现一个简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-04-04
这篇文章主要介绍了关于vue中路由的跳转和参数传递，参数获取方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
vue使用v-model实现数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素，本文就详细的介绍一下原理，感兴趣的可以了解一下2021-08-08
今天小编就为大家分享一篇vue 2.8.2版本配置刚进入时候的默认页面方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue2与vue3双向数据绑定的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue实现浏览器全屏展示功能,项目中使用的是sreenfull插件，执行命令安装，具体实现代码跟随小编一起看看吧2019-11-11
在本篇文章里小编给大家整理的是关于Vue基础配置讲解内容，有兴趣的朋友们可以学习下。2019-11-11
最新评论