溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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循環給標簽屬性賦值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
