vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法
更新時(shí)間：2018年10月18日 15:30:04 作者：AN_MIN
這篇文章主要介紹了vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.給每個(gè)按鈕添加class的屬性值以及icon圖標(biāo)屬性值，通過(guò)v-for實(shí)現(xiàn)自動(dòng)添加樣式，發(fā)現(xiàn)屬性值無(wú)法顯示，切記在屬性前加上v-bind
<html>
<head>
<meta charset="utf-8">
<title>v-for在線測(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ì)腳本之家網(wǎng)站的支持！
相關(guān)文章
基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能
這篇文章給大家介紹基于vue實(shí)現(xiàn)循環(huán)滾動(dòng)列表功能，給大家介紹了該組件的用法，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-09-09
這篇文章主要為大家詳細(xì)介紹了Vue3批量異步更新是如何實(shí)現(xiàn)的，文中的示例代碼簡(jiǎn)潔易懂，具有一定的借鑒價(jià)值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法
這篇文章主要介紹了Vue關(guān)于數(shù)據(jù)綁定出錯(cuò)解決辦法的相關(guān)資料,需要的朋友可以參考下2017-05-05
vue子組件created方法不執(zhí)行問(wèn)題及解決
這篇文章主要介紹了vue子組件created方法不執(zhí)行問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue+canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名
這篇文章主要為大家詳細(xì)介紹了vue+canvas實(shí)現(xiàn)移動(dòng)端手寫(xiě)簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
Template?ref在Vue3中的實(shí)現(xiàn)原理詳解
這篇文章主要為大家介紹了Template?ref在Vue3中的實(shí)現(xiàn)原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)
這篇文章主要介紹了vue-cli3項(xiàng)目升級(jí)到vue-cli4 的方法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue3使用el-table組件實(shí)現(xiàn)分頁(yè)、多選以及回顯功能
這篇文章主要介紹了Vue3使用el-table組件實(shí)現(xiàn)分頁(yè)、多選以及回顯功能,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
本篇文章主要介紹了自定義vue組件發(fā)布到npm的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05