前面我們和大家分享了vue元件中v for指令介紹及使用v-for出現告警問題解析內容，本文我們將和大家分享vue v-for 資料處理，v-for的基本使用：使用v- for="item in list" 或 v-for="item of list" 進行遍歷，使用list:list:[{n:1},{n:2},{n:3},{n:4}, {n:5},{n:6}] 時為了方便擴展， 更貼近實際專案需求。
<p id="app">
<ul>
<li v-for="item in list">{{item.n}}</li>
</ul>
</p>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
list:[{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}]
}
})
</script>v-for 給了兩個參數key 和index
這裡需要對遍歷的資料分為數組和 物件分別對待
數組下是沒有key值的
而物件下可以得到參數key值實際顯示效果如下：
<p id="app">
<ul>
<li v-for="(item,index,key) of list">{{item.n}}
<p>index={{ index }}</p>
<p>key={{key}}</p>
</li>
</ul>
<p>
<p v-for="(item,key,index) of obj">
{{item}}：{{key}}：{{index}}
</p>
</p>
</p>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
obj:{color:'red',age:18,sex:'girl'}
}
})
</script>v-for支援等數迭代
v-for="n
in 10"
借助這個可以逐步載入數據，控制m值就行了
<p v-for="i of m">
{{list[i-1].n}}
</p>
</p>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
m:3,
list:[{n:11},{n:22},{n:33},{n:44},{n:55},{n:66}],
obj:{color:'red',age:18,sex:'girl'}
}
})
</script>注意：
遍歷物件時使用不能this綁定元件，只能在處理函數中傳入index 或其他的一些特徵值來對當前list選定，再進行操作。賦值運算不能觸發頁面更新
所以vue js 提供了Vue.set(app.list,1,{n:33})的陣列資料更新方法。
#vue元件中v for指令介紹及使用v-for出現警告問題解析
以上是實例講解vue v-for 資料處理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
