vue 內(nèi)聯(lián)樣式style中的background用法說明
在我們使用vue開發(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ǔ)充:
好像還可以這樣寫
<div :style=' ’background-image’ : ’ url( ’ + 內(nèi)容+’ ) ’ '></div>
更新一點(diǎn)
當(dāng)你的style設(shè)置背景色得時(shí)候是需要加{}得
但是如果是width這種就不用加了
over!
知識(shí)拓展:vue 在已有的購買列表中(數(shù)據(jù)庫返回的數(shù)據(jù))修改商品數(shù)量
連續(xù)加班一個(gè)月 連續(xù)通宵三天 到最后還是少了一個(gè)功能 心碎
簡介:一個(gè)生成好的商品列表(數(shù)據(jù)庫返回的數(shù)據(jù))
首先拿到我們需要渲染的數(shù)組
在data中定義
我是在測試的時(shí)候 直接寫了兩條數(shù)據(jù)
下面開始點(diǎn)擊刪除
點(diǎn)擊添加是一樣的代碼 只不過加號(hào)減號(hào)的區(qū)別
以上這篇vue 內(nèi)聯(lián)樣式style中的background用法說明就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 前端html+css實(shí)現(xiàn)動(dòng)態(tài)生日快樂代碼2. 不要在HTML中濫用div3. el-input無法輸入的問題和表單驗(yàn)證失敗問題解決4. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)5. XML基本概念XPath、XSLT與XQuery函數(shù)介紹6. XML入門的常見問題(四)7. WML的簡單例子及編輯、測試方法第1/2頁8. vue實(shí)現(xiàn)復(fù)制文字復(fù)制圖片實(shí)例詳解9. 關(guān)于html嵌入xml數(shù)據(jù)島如何穿過樹形結(jié)構(gòu)關(guān)系的問題10. XML入門的常見問題(三)
