vue学习九--v-for的四种用法，以及key问题
生活随笔
收集整理的這篇文章主要介紹了
vue学习九--v-for的四种用法，以及key问题
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以下是v-fo人的四種用法：
即循環普通數組，對象數組，對象，以及迭代數字。
一 普通數組的使用：
二 對象數組的使用：
<body><div id="app"><p v-for='(user ,index) in list'>ID:{{user.id}}--名字:{{user.name}}--索引{{index}}</p></div><script>var vm=new Vue({el:'#app',data:{list:[{id:1,name:'zs1'},{id:2,name:'zs2'},{id:3,name:'zs3'},{id:4,name:'zs4'},]},methods:{}});</script> </body></html>三 對象的使用：
<body><div id="app"><!-- 注意：遍歷對象時先顯示val，再顯示可以，同時也有索引 --><p v-for = "(val , key,index) in user">{{val}}--{{key}}--{{index}}</p></div><script>var vm=new Vue({el:'#app',data:{user:{id:1,name:"托尼賈",gender:'男'}},methods:{}});</script> </body></html>四 迭代數字：
<body><div id="app"><!-- v-for 可以遍歷，數組 對象數組 對象 以及數字--><!-- count 從一開始 --><p v-for="count in 10">這是第{{count}}遍歷</p></div><script>var vm=new Vue({el:'#app',data:{},methods:{}});</script> </body></html>在使用v-for循環中可能會出現一些問題。如下：
<body><div id="app"><div><label>ID:<input type="text" v-model="id"></label><label>name:<input type="text" v-model="name"></label><input type="button" value="添加" @click="add"></div><p v-for="item in list" ><input type="checkbox" >{{item.id}}--{{item.name}}</p></div><script>var vm=new Vue({el:'#app',data:{id:'',name : '',list:[{id : 1 , name : '項羽'},{id : 2 , name : "趙高"},{id : 3 , name : "秦始皇"},{id : 4 , name : "趙小川"},]},methods:{add(){this.list.unshift({id : this.id , name : this.name})}}});</script> </body></html>
在此勾選第三個，然后添加一個數以后會出現：
注意原來勾選的是“秦始皇”，現在變成“趙高”，因為我們在前端勾選時候，并沒有實現數據的綁定，在勾選前添加數據，便會把數據往下擠。
解決此問題需要添加一個key給v-for所在的那個標簽：
1. 此處如果不添加key，可能會出現前端勾選的復選框不是對象里的id，在添加數據會造成數據勾選不準確。
2.使用v-bind綁定key ，同時key必須是num 或者string類型
3.在組件中，使用v-for循環的時候，或者在一些特殊情況的時候，如果v-for有問題，必須在使用v-for同時，指定唯一的 字符串/數字 類型：key值
添加之后：
總結
以上是生活随笔為你收集整理的vue学习九--v-for的四种用法，以及key问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用winsockfix修复网络正常但无
- 下一篇： Vuex深度解析