在我們使用vue開發的時候 有很多時候我們需要用到背景圖

這個時候會直接使用 內聯樣式 直接把你拿到的資料拼接上去

注意 在vue中直接使用style時 花括號一定別忘記

還有就是你的url一定要加引號拼接

：style = ' { backgroundImage : " url ( " + item.img + " ) " } '

完事！

補充：

好像還可以這樣寫

<div :style=" 'background-image' : ' url( ' + 內容+' ) ' "></div>

更新一點

當你的style設定背景色得時候是需要加{}得

但是如果是width這種就不用加了

over！

知識拓展：vue 在已有的購買列表中（資料庫返回的資料）修改商品數量

連續加班一個月 連續通宵三天 到最後還是少了一個功能 心碎

簡介：一個生成好的商品列表（資料庫返回的資料）

首先拿到我們需要渲染的陣列

在data中定義

我是在測試的時候 直接寫了兩條資料

下面開始點選刪除

點選新增是一樣的程式碼 只不過加號減號的區別

以上這篇vue 內聯樣式style中的background用法說明就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。