vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法
更新時間：2018年10月18日 15:30:04 作者：AN_MIN
這篇文章主要介紹了vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
1.給每個按鈕添加class的屬性值以及icon圖標(biāo)屬性值，通過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，只有在標(biāo)簽屬性前加上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 。
{{}}
應(yīng)該寫在html文本之間，不能寫在屬性值里。
總結(jié)
以上所述是小編給大家介紹的vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue實現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁數(shù)據(jù),結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下,2024-06-06
這篇文章主要介紹了關(guān)于Vue單元測試的幾個坑，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了Vue中全局常用的過濾方法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue中axios防止多次觸發(fā)終止多次請求的示例代碼（防抖）
這篇文章主要介紹了vue中axios防止多次觸發(fā)終止多次請求的實現(xiàn)方法（防抖）,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
JavaScript實現(xiàn)簡單的圖片切換功能(實例代碼)
這篇文章主要介紹了JavaScript實現(xiàn)簡單的圖片切換功能，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2020-04-04
這篇文章主要介紹了vue動態(tài)組件之:is在組件中的使用場景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了對 Vue-Router 進行單元測試的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
在vue中實現(xiàn)表單驗證碼與滑動驗證功能的代碼詳解
在Web應(yīng)用程序中，表單驗證碼和滑動驗證是常見的安全機制，用于防止惡意攻擊和機器人攻擊，本文將介紹如何使用Vue和vue-verify-code庫來實現(xiàn)表單驗證碼和滑動驗證功能,需要的朋友可以參考下2023-06-06
本篇文章主要介紹了vue實現(xiàn)增刪改查效果的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了nuxt+axios解決前后端分離SSR的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10