vue動態(tài)綁定background的方法

更新時間：2023年10月30日 17:15:34 作者：程琬清君

background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等屬性的縮寫,本文我用動態(tài)綁定background-image來舉例,感興趣的朋友跟隨小編一起看看吧

background是background-color，background-image，background-repeat，background-attachment，background-position，background-size等屬性的縮寫。

這篇文章我用動態(tài)綁定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會被解析成字符串，取不出來，所以需要動態(tài)的綁定，以下有三種寫法：

寫法一：

<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動態(tài)綁定background的文章就介紹到這了,更多相關vue動態(tài)綁定background內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

安裝Vue+webpack出現(xiàn)的問題及解決方案
這篇文章主要介紹了安裝Vue+webpack出現(xiàn)的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
vue3中的setup使用和原理解析
這篇文章主要介紹了vue3的setup的使用和原理解析,通過本文我們學習了?setup?函數(shù)執(zhí)行的過程及?Vue?是如何處理捕獲?setup?的返回結果的，需要的朋友可以參考下
2022-09-09
Vite3 Svelte3構建Web應用報錯process is not def
這篇文章主要介紹了Vite3 Svelte3構建Web應用報錯：'process is not defined'解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
Vue3訪問頁面時自動獲取數(shù)據(jù)的方法實現(xiàn)
本文介紹了在Vue3中如何利用生命周期鉤子函數(shù)和定時器實現(xiàn)訪問頁面時自動獲取數(shù)據(jù)的方法,這種方法適用于需要在頁面加載時即時更新數(shù)據(jù)顯示的場景,感興趣的可以了解一下
2024-11-11
element的el-date-picker組件實現(xiàn)只顯示年月日時分效果(不顯示秒)
最近遇到這樣的需求使用element的el-date-picker組件,只顯示時分,不顯示秒,下面小編給大家分享element的el-date-picker組件實現(xiàn)只顯示年月日時分效果,感興趣的朋友一起看看吧
2024-08-08
vue3中vue-router安裝配置使用全過程
VueRouter是Vue.js官方的路由管理器,用于實現(xiàn)單頁面應用(SPA)的路由功能,這篇文章主要介紹了vue3中vue-router安裝配置使用的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2025-09-09
vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例
今天小編就為大家分享一篇vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
VueUse功能精簡你的dependencies
這篇文章主要為大家介紹了VueUse功能精簡你的dependencies實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
vue3調度器scheduler功能和用法詳解
調度器是vue3響應式系統(tǒng)中一個非常重要的特性，可調度性指的是當trigger 動作觸發(fā)副作用函數(shù)重新執(zhí)行時，有能力決定副作用函數(shù)執(zhí)行的時機、次數(shù)以及方式，本文通過代碼示例給大家介紹調度器是什么，有什么功能，怎么使用,感興趣的同學可以借鑒閱讀
2023-06-06
daisyUI解決TailwindCSS堆砌class問題詳解
這篇文章主要為大家介紹了daisyUI解決TailwindCSS堆砌class問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07