vue 實(shí)現(xiàn)v-for循環(huán)回來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定id
更新時(shí)間：2019年11月07日 09:53:14 作者：郅慧芳
今天小編就為大家分享一篇vue 實(shí)現(xiàn)v-for循環(huán)回來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定id，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
如下所示：
代碼效果圖!!!!!
<ul>
<li v-for="(site,index) in sites" :key="index" :id="forId(index)">
<span class="channel-li-li-border">
<span class="firstLevel">{{site.name}}</span>
</span>
</li>
</ul>
<script>
new Vue({
el: '#cat2s',
data: function(){
return {
brandList: [],
sites: [
{ name: '품질검수 서비스' },
{ name: '배송물류 서비스' },
{ name: '브랜드사 리스트'}
]
}
},
methods: {
forId:function(index){
return "forid_" +index
},
}
})
</script>
以上這篇vue 實(shí)現(xiàn)v-for循環(huán)回來(lái)的數(shù)據(jù)動(dòng)態(tài)綁定id就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Pinia是Vue.js的輕量級(jí)狀態(tài)管理庫(kù),比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關(guān)于Vue3狀態(tài)管理之Pinia的入門使用教程,需要的朋友可以參考下2022-04-04
vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例
今天小編就為大家分享一篇vue.js+element-ui動(dòng)態(tài)配置菜單的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調(diào)獲取更新后DOM機(jī)制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
使用Vue-axios進(jìn)行數(shù)據(jù)交互的方法
這篇文章主要介紹了使用Vue-axios進(jìn)行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進(jìn)行數(shù)據(jù)交互的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)或工作有所幫助2022-03-03
這篇文章主要介紹了Vue前端后端的交互方式?axios，axios?為第三方數(shù)據(jù)請(qǐng)求庫(kù)，下文具體的內(nèi)容介紹需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-04-04
Vue中v-for的數(shù)據(jù)分組實(shí)例
下面小編就為大家分享一篇Vue中v-for的數(shù)據(jù)分組實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue.js項(xiàng)目中管理每個(gè)頁(yè)面的頭部標(biāo)簽的兩種方法
這篇文章主要介紹了Vue.js項(xiàng)目中管理每個(gè)頁(yè)面的頭部標(biāo)簽的兩種方法,需要的朋友可以參考下2018-06-06
React DOM diff 對(duì)比Vue DOM diff
這篇文章主要為大家介紹了React DOM diff 對(duì)比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue通過(guò)vue-router實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的全過(guò)程
這篇文章主要介紹了Vue通過(guò)vue-router實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的操作步驟,文中有詳細(xì)的代碼示例和圖文供大家參考,對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下2024-04-04
uniapp微信小程序axios庫(kù)的封裝及使用詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于uniapp微信小程序axios庫(kù)的封裝及使用的相關(guān)資料,Axios是一個(gè)基于promise網(wǎng)絡(luò)請(qǐng)求庫(kù),作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下2023-08-08