溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue中v-for循環(huán)給標簽屬性賦值的方法

發(fā)布時間：2020-09-03 05:37:53 來源：腳本之家 閱讀：382 作者：AN_MIN 欄目：web開發(fā)

1.給每個按鈕添加class的屬性值以及icon圖標屬性值，通過v-for實現(xiàn)自動添加樣式，發(fā)現(xiàn)屬性值無法顯示，切記在屬性前加上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>

總結(jié)：

如果直接這么寫
<button class="site.icon" icon="site.icon">
{{site.icon}}
</button>或者<button class="{{site.icon}}" 
icon="{{site.icon
}}">{{site.icon}}
</button>，會發(fā)現(xiàn)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文本之間，不能寫在屬性值里。

總結(jié)

以上所述是小編給大家介紹的vue中v-for循環(huán)給標簽屬性賦值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手