vue3?動(dòng)態(tài)綁定背景圖片方法示例
更新時(shí)間：2023年10月31日 08:46:36 作者：HeiYanjing
這篇文章主要為大家介紹了vue3動(dòng)態(tài)綁定背景圖片實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
引言
有時(shí)候會(huì)遇到給img標(biāo)簽或者div設(shè)置背景圖片的需求，資源文件可能需要經(jīng)過(guò)二次判斷來(lái)動(dòng)態(tài)綁定。記錄一下工作中遇到的坑
img標(biāo)簽src屬性函數(shù)獲取
這種方式可以避開(kāi)綁定響應(yīng)式數(shù)據(jù)響應(yīng)式
<img
:src="getSource()"
alt=""
class="banner_img"
/>const getSource = () => {
return yesOrNo ?
new URL('../../path1', import.meta.url).href :
new URL('../../path2', import.meta.url).href
}sass語(yǔ)法設(shè)置背景圖片
yesOrNo是響應(yīng)式數(shù)據(jù)
.set_bg_img {
@if #{yesOrNo} {
background: url('img1');
}
@else {
background: url('img2');
}通過(guò)style，ref，reactive來(lái)綁定實(shí)現(xiàn)
backgroundImage格式依然按照規(guī)范來(lái)實(shí)現(xiàn),這里用ref或者reactive來(lái)綁定back_image都可以實(shí)現(xiàn)。
<div :style="back_image">
const back_image = ref({
backgroundImage: yesOrNo ?
`url(${new URL('path1', import.meta.url).href})` :
`url(${new URL('path2', import.meta.url).href})`
})以上就是vue3 動(dòng)態(tài)綁定背景圖片的詳細(xì)內(nèi)容，更多關(guān)于vue3 動(dòng)態(tài)綁定背景圖片的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在本篇文章里小編給大家整理的是關(guān)于vue的keep-alive用法技巧以及實(shí)例代碼，需要的朋友們學(xué)習(xí)下。2019-08-08
解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo
這篇文章主要為大家介紹了解決element-ui?el-drawer抽屜el-dialog彈框關(guān)閉優(yōu)化demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-06-06
vue2安裝vue-router報(bào)錯(cuò)的解決方法
vue-router的安裝不是理想化的,會(huì)出現(xiàn)問(wèn)題,需要靜下心認(rèn)真研究,熬過(guò)去就會(huì)懂得更多,這篇文章主要給大家介紹了關(guān)于vue2安裝vue-router報(bào)錯(cuò)的解決方法,需要的朋友可以參考下2022-03-03
解決Vue.js由于延時(shí)顯示了{(lán){message}}引用界面的問(wèn)題
今天小編就為大家分享一篇解決Vue.js由于延時(shí)顯示了{(lán){message}}引用界面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能
這篇文章主要介紹了基于Vue3+TypeScript實(shí)現(xiàn)鼠標(biāo)框選功能,文中通過(guò)代碼示例給大家講解的非常纖細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了vue面試observable原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了Vue中的keep-alive，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
element的el-tree多選樹(shù)(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)
最近想要實(shí)現(xiàn)多選框關(guān)聯(lián)的功能，但是卻出現(xiàn)了element的el-tree多選樹(shù)(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)的問(wèn)題，本文就來(lái)介紹一下解決方法，一起來(lái)了解一下2021-05-05
vue中的數(shù)據(jù)綁定原理的實(shí)現(xiàn)
本篇文章主要介紹了vue中的數(shù)據(jù)綁定原理的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)導(dǎo)航欄菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08