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+webpack出现的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要介绍了vue3的setup的使用和原理解析,通过本文我们学习了 setup 函数执行的过程及 Vue 是如何处理捕获 setup 的返回结果的，需要的朋友可以参考下2022-09-09
Vite3 Svelte3构建Web应用报错process is not def
这篇文章主要介绍了Vite3 Svelte3构建Web应用报错：'process is not defined'解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本文介绍了在Vue3中如何利用生命周期钩子函数和定时器实现访问页面时自动获取数据的方法,这种方法适用于需要在页面加载时即时更新数据显示的场景,感兴趣的可以了解一下2024-11-11
element的el-date-picker组件实现只显示年月日时分效果(不显示秒)
最近遇到这样的需求使用element的el-date-picker组件,只显示时分,不显示秒,下面小编给大家分享element的el-date-picker组件实现只显示年月日时分效果,感兴趣的朋友一起看看吧2024-08-08
VueRouter是Vue.js官方的路由管理器,用于实现单页面应用(SPA)的路由功能,这篇文章主要介绍了vue3中vue-router安装配置使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-09-09
今天小编就为大家分享一篇vue实现在一个方法执行完后执行另一个方法的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了VueUse功能精简你的dependencies实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
调度器是vue3响应式系统中一个非常重要的特性，可调度性指的是当trigger 动作触发副作用函数重新执行时，有能力决定副作用函数执行的时机、次数以及方式，本文通过代码示例给大家介绍调度器是什么，有什么功能，怎么使用,感兴趣的同学可以借鉴阅读2023-06-06
daisyUI解决TailwindCSS堆砌class问题详解
这篇文章主要为大家介绍了daisyUI解决TailwindCSS堆砌class问题详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论