1.給每個按鈕添加class的屬性值以及icon圖標屬性值，通過v-for實現自動添加樣式，發現屬性值無法顯示，切記在屬性前加上v-bind
<html><head><meta charset="utf-8"><title>v-for在線測試實例</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>總結：
如果直接這么寫<button class="site.icon" icon="site.icon">{{site.icon}}</button>或者<button class="{{site.icon}}" icon="{{site.icon}}">{{site.icon}}</button>，會發現class以及icon的值就是字符串site.icon，只有在標簽屬性前加上v-bind,即改成<button v-bind:class="site.icon" v-bind:icon="site.icon">{{site.icon}}</button>,class與icon的值才會顯示el-icon-search，el-icon-refresh, el-icon-download 。{{}}應該寫在html文本之間，不能寫在屬性值里。 總結
以上所述是小編給大家介紹的vue中v-for循環給標簽屬性賦值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
新聞熱點
疑難解答
圖片精選
