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)過二次判斷來動(dòng)態(tài)綁定。記錄一下工作中遇到的坑
img標(biāo)簽src屬性函數(shù)獲取
這種方式可以避開綁定響應(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語法設(shè)置背景圖片
yesOrNo是響應(yīng)式數(shù)據(jù)
.set_bg_img {
@if #{yesOrNo} {
background: url('img1');
}
@else {
background: url('img2');
}通過style，ref，reactive來綁定實(shí)現(xiàn)
backgroundImage格式依然按照規(guī)范來實(shí)現(xiàn),這里用ref或者reactive來綁定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)文章
我們通過實(shí)例代碼給大家分享了Vue中watch的高級(jí)用法，對(duì)此知識(shí)點(diǎn)有需要的朋友可以跟著學(xué)習(xí)下。2018-05-05
JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能(實(shí)例代碼)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-04-04
vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能
這篇文章主要介紹了vue中如何實(shí)現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了Vue中原生template標(biāo)簽失效如何解決，找了整一天也沒找著這事件為什么觸發(fā)不了，第二天意識(shí)到原生代碼里的template可能有問題，在原生環(huán)境中template標(biāo)簽內(nèi)部的東西是不會(huì)渲染出來的，雖然解析器在加載頁面的時(shí)候確實(shí)會(huì)處理這部分代碼片段2023-02-02
vue在antDesign框架或elementUI框架組件native事件中觸發(fā)2次問題
這篇文章主要介紹了vue在antDesign框架或elementUI框架組件native事件中觸發(fā)2次問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例
本文主要介紹了vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)移動(dòng)端的scroll滾動(dòng)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本文主要介紹了Webpack和Vite的區(qū)別小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue3和vue2掛載實(shí)例到全局(自定義消息提示框組件方式)
這篇文章主要介紹了vue3和vue2掛載實(shí)例到全局(自定義消息提示框組件方式),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
前端上傳文件很大時(shí),會(huì)出現(xiàn)各種問題,比如連接超時(shí)了,網(wǎng)斷了,都會(huì)導(dǎo)致上傳失敗,這個(gè)時(shí)候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實(shí)現(xiàn)大文件切片上傳吧2023-11-11