欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論