vue 取出v-for循環(huán)中的index值實例
一開始接觸到vue的for循環(huán)就覺得賊好用，重復性的東西再也不用ctrl C+ctrl V了好嗎。不僅代碼可復用了，而且提高了代碼可讀性、減輕了工作量，更重要的是寫代碼都有成就感了。
貼出個小小例子：
template
<ul v-for="(item,index) in pcState">
<li>{{item.name}}</li>
<li>{{item.state}}</li>
<li>{{item.ip}}</li>
<li>{{item.canCPU}}</li>
</ul>
script
data(){
return {
pcState:[
{
name:'abc',
state:'on',
ip:'192.168.0.1',
canCpu:'8'
},
{
name:'dce',
state:'on',
ip:'192.168.0.2',
canCpu:'18'
},
{
name:'asdf',
state:'on',
ip:'192.168.0.3',
canCpu:'8'
}
]
}
}
在template中，item指的就是循環(huán)中的元素本身，在本例中就是指PCState中的每個對象。而index則是元素的索引值，也就是本例中的對象在pcState數(shù)組中所占的下標。
好的，接下來貼出代碼執(zhí)行的結(jié)果：
執(zhí)行結(jié)果
恩，先不管樣式，反正代碼是成功的。
但是在實際項目中，我們有時候會想要取得循環(huán)中的index值，這個時候怎么辦，我曾經(jīng)想把v-model或是v-bind綁定在組件上以取得index，但是無效。后來我發(fā)現(xiàn)可以通過事件獲取。當你觸發(fā)一個事件時，可以順便拿下他的值。恩，多說無益，貼上代碼：
//template
<ul v-for="(item,index) in pcState">
<li @click='getIndex(index)'>{{item.name}}</li>
<li>{{item.state}}</li>
<li>{{item.ip}}</li>
<li>{{item.canCPU}}</li>
</ul>
//methods
getIndex(index){
console.log(index);
}
這樣不僅是index值，元素本身也可以拿到。
以上這篇vue 取出v-for循環(huán)中的index值實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue 實現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id
今天小編就為大家分享一篇vue 實現(xiàn)v-for循環(huán)回來的數(shù)據(jù)動態(tài)綁定id，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue緩存之keep-alive的理解和應用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要為大家介紹了vuex的核心概念和基本使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
一般我們的前端Vue項目中都會涉及到跨域的問題,下面這篇文章主要給大家介紹了關(guān)于vue項目部署跨域問題的詳細解決過程,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-05-05
vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)
這篇文章主要為大家詳細介紹了vuejs通過filterBy、orderBy實現(xiàn)搜索篩選、降序排序數(shù)據(jù)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
vue組件屬性(props)及私有數(shù)據(jù)data解析
這篇文章主要介紹了vue組件屬性(props)及私有數(shù)據(jù)data解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue+webpack項目配置便于維護的目錄結(jié)構(gòu)教程詳解
新建項目的時候創(chuàng)建合理的目錄結(jié)構(gòu)便于后期的維護是很重要。這篇文章主要介紹了Vue+webpack項目配置便于維護的目錄結(jié)構(gòu) ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了實現(xiàn)一個Vue版Upload組件，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
基于前端VUE+ElementUI實現(xiàn)table行上移或下移功能(支持跨頁移動)
有時候需要前端實現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關(guān)于如何基于前端VUE+ElementUI實現(xiàn)table行上移或下移(支持跨頁移動)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07