1.給每個(gè)按鈕添加class的屬性值以及icon圖標(biāo)屬性值,通過(guò)v-for
實(shí)現(xiàn)自動(dòng)添加樣式,發(fā)現(xiàn)屬性值無(wú)法顯示,切記在屬性前加上v-bind
讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo),不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù),將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:主機(jī)域名、網(wǎng)站空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、永安網(wǎng)站維護(hù)、網(wǎng)站推廣。
<html> <head> <meta charset="utf-8"> <title>v-for在線(xiàn)測(cè)試實(shí)例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> </script></head><body><div id="app"> <ul> <template v-for="site in sites"> <button v-bind:class="site.icon" v-bind:icon:"site.icon"> {{ site.icon }} </button> </template> </ul> </div> <script> new Vue ({ el: '#app', data: { sites: [ { icon: 'el-icon-search' }, { icon: 'el-icon-refresh' }, { icon: 'el-icon-download' } ] }}) </script> </body> </html>
總結(jié):
如果直接這么寫(xiě) <button class="site.icon" icon="site.icon"> {{site.icon}} </button>或者<button class="{{site.icon}}" icon="{{site.icon }}">{{site.icon}} </button>,會(huì)發(fā)現(xiàn)class以及icon的值就是字符串site.icon,只有在標(biāo)簽屬性前加上v-bind,即改成<button v-bind:class="site.icon" v-bind:icon="site.icon">{{site.icon}}</button>,class與icon的值才會(huì)顯示el-icon-search,el-icon-refresh, el-icon-download 。 {{}} 應(yīng)該寫(xiě)在html文本之間,不能寫(xiě)在屬性值里。
總結(jié)
以上所述是小編給大家介紹的vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
新聞標(biāo)題:vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法
當(dāng)前鏈接:http://muchs.cn/article2/jpeiic.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、定制網(wǎng)站、、網(wǎng)站改版、網(wǎng)站制作、外貿(mào)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)