vue 實現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id
更新時間：2019年11月07日 09:53:14 作者：郅慧芳
今天小編就為大家分享一篇vue 實現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
代碼效果圖!!!!!
<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 實現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Pinia是Vue.js的輕量級狀態(tài)管理庫,比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關于Vue3狀態(tài)管理之Pinia的入門使用教程,需要的朋友可以參考下2022-04-04
vue.js+element-ui動態(tài)配置菜單的實例
今天小編就為大家分享一篇vue.js+element-ui動態(tài)配置菜單的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue nextTick延遲回調(diào)獲取更新后DOM機制詳解
這篇文章主要為大家介紹了Vue nextTick延遲回調(diào)獲取更新后DOM機制詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了使用Vue-axios進行數(shù)據(jù)交互詳情，文章圍繞Vue-axios進行數(shù)據(jù)交互的相關資料展開詳細內(nèi)容，需要的小伙伴可以參考一下，希望對你的學習或工作有所幫助2022-03-03
這篇文章主要介紹了Vue前端后端的交互方式?axios，axios?為第三方數(shù)據(jù)請求庫，下文具體的內(nèi)容介紹需要的小伙伴可以參考一下，希望對你的學習有所幫助2022-04-04
下面小編就為大家分享一篇Vue中v-for的數(shù)據(jù)分組實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了Vue.js項目中管理每個頁面的頭部標簽的兩種方法,需要的朋友可以參考下2018-06-06
這篇文章主要為大家介紹了React DOM diff 對比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
Vue通過vue-router實現(xiàn)頁面跳轉的全過程
這篇文章主要介紹了Vue通過vue-router實現(xiàn)頁面跳轉的操作步驟,文中有詳細的代碼示例和圖文供大家參考,對大家的學習或工作有一定的幫助,感興趣的朋友可以參考下2024-04-04
這篇文章主要給大家介紹了關于uniapp微信小程序axios庫的封裝及使用的相關資料,Axios是一個基于promise網(wǎng)絡請求庫,作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下2023-08-08