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