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