vue 內(nèi)聯(lián)樣式style中的background用法說(shuō)明
在我們使用vue開(kāi)發(fā)的時(shí)候 有很多時(shí)候我們需要用到背景圖
這個(gè)時(shí)候會(huì)直接使用 內(nèi)聯(lián)樣式 直接把你拿到的數(shù)據(jù)拼接上去
注意 在vue中直接使用style時(shí) 花括號(hào)一定別忘記
還有就是你的url一定要加引號(hào)拼接
：style = ' { backgroundImage : " url ( " + item.img + " ) " } '
完事！
補(bǔ)充：
好像還可以這樣寫(xiě)
<div :style=" 'background-image' : ' url( ' + 內(nèi)容+' ) ' "></div>
更新一點(diǎn)
當(dāng)你的style設(shè)置背景色得時(shí)候是需要加{}得
但是如果是width這種就不用加了
over！
知識(shí)拓展：vue 在已有的購(gòu)買(mǎi)列表中（數(shù)據(jù)庫(kù)返回的數(shù)據(jù)）修改商品數(shù)量
連續(xù)加班一個(gè)月 連續(xù)通宵三天 到最后還是少了一個(gè)功能 心碎
簡(jiǎn)介：一個(gè)生成好的商品列表（數(shù)據(jù)庫(kù)返回的數(shù)據(jù)）
首先拿到我們需要渲染的數(shù)組
在data中定義
我是在測(cè)試的時(shí)候 直接寫(xiě)了兩條數(shù)據(jù)
下面開(kāi)始點(diǎn)擊刪除
點(diǎn)擊添加是一樣的代碼 只不過(guò)加號(hào)減號(hào)的區(qū)別
以上這篇vue 內(nèi)聯(lián)樣式style中的background用法說(shuō)明就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)效果
這篇文章主要為大家介紹了如何利用Vue3實(shí)現(xiàn)列表虛擬滾動(dòng)效果，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定價(jià)值，需要的可以參考一下2022-04-04
Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式(超詳細(xì)整理)
這篇文章給大家詳細(xì)的整理了Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的三種方式,使用vue-router,聲明式-router-link,編程式這三種方法,分別有詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09
Vue.js在數(shù)組中插入重復(fù)數(shù)據(jù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue.js在數(shù)組中插入重復(fù)數(shù)據(jù)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-11-11
Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例
這篇文章主要介紹了Vue-Ant Design Vue-普通及自定義校驗(yàn)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容
在我們很多前端業(yè)務(wù)開(kāi)發(fā)中,往往為了方便,都需要自定義一些用戶組件,本文主要介紹了element中Select選擇器實(shí)現(xiàn)自定義顯示內(nèi)容,感興趣的可以了解一下2023-12-12
Vue生產(chǎn)環(huán)境調(diào)試的方法步驟
開(kāi)發(fā)環(huán)境下Vue會(huì)提供很多警告來(lái)幫你對(duì)付常見(jiàn)的錯(cuò)誤與陷阱,而在生產(chǎn)環(huán)境下,這些警告語(yǔ)句卻沒(méi)有用,反而會(huì)增加應(yīng)用的體積,下面這篇文章主要給大家介紹了關(guān)于Vue生產(chǎn)環(huán)境調(diào)試的方法步驟,需要的朋友可以參考下2022-04-04
vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能的示例代碼
這篇文章主要介紹了vue+iview框架實(shí)現(xiàn)左側(cè)動(dòng)態(tài)菜單功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了element-ui中按需引入的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)
本文主要介紹了Vue3+TS+Vite+NaiveUI搭建一個(gè)項(xiàng)目骨架實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
HBuilder導(dǎo)入vue項(xiàng)目并通過(guò)域名訪問(wèn)的過(guò)程詳解
這篇文章主要介紹了HBuilder導(dǎo)入vue項(xiàng)目并通過(guò)域名訪問(wèn),一般情況下運(yùn)行vue項(xiàng)目需要安裝node.js，通過(guò)npm命令來(lái)安裝vue組件和運(yùn)行vue項(xiàng)目，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05