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)商品列表的無(wú)限加載思路和步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)商品列表的無(wú)限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁(yè)數(shù)據(jù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下,2024-06-06
這篇文章主要介紹了關(guān)于Vue單元測(cè)試的幾個(gè)坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vue中全局常用的過(guò)濾方法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中axios防止多次觸發(fā)終止多次請(qǐng)求的示例代碼（防抖）
這篇文章主要介紹了vue中axios防止多次觸發(fā)終止多次請(qǐng)求的實(shí)現(xiàn)方法（防抖）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能(實(shí)例代碼)
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的圖片切換功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-04-04
vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景
這篇文章主要介紹了vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
對(duì) Vue-Router 進(jìn)行單元測(cè)試的方法
這篇文章主要介紹了對(duì) Vue-Router 進(jìn)行單元測(cè)試的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
在vue中實(shí)現(xiàn)表單驗(yàn)證碼與滑動(dòng)驗(yàn)證功能的代碼詳解
在Web應(yīng)用程序中，表單驗(yàn)證碼和滑動(dòng)驗(yàn)證是常見(jiàn)的安全機(jī)制，用于防止惡意攻擊和機(jī)器人攻擊，本文將介紹如何使用Vue和vue-verify-code庫(kù)來(lái)實(shí)現(xiàn)表單驗(yàn)證碼和滑動(dòng)驗(yàn)證功能,需要的朋友可以參考下2023-06-06
vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
本篇文章主要介紹了vue實(shí)現(xiàn)增刪改查效果的實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10