1.遍历数组
<div id="app"> <ul> <li v-for="item in names">{{item}}</li> //遍历过程中不获取索引值 </ul> <ul> <li v-for="（item,index）in names">{{index}}{{item}}</li> //遍历过程中获取索引值 </ul> </div> </body> <script> const app = new Vue({ el:"#app", data:{ names:['123456','456789','345678','45678'] } }) </script>2.遍历对象
<div id="app"> <ul> <li v-for="item in names">{{item}}</li> //拿到的都是value </ul> <ul> <li v-for="（value，key）in names">{{key}}:{{value}}</li> //拿到的对象的key value index </ul> <ul> <li v-for="（value，key,index）in names">{{index}}.{{key}}:{{value}}</li> //拿到的对象的key value index </ul> </div> </body> <script> const app = new Vue({ el:"#app", data:{ info:{ name:'34', age:11, height:20 } } }) </script>3.v-for 使用过程 添加key
推荐使用 提高性能 根据key对照已有的内容原来的会复用 在li中间插入新的别的li vue会从头找 从不对的开始删除后面的 有key就会复用 在后面插入则无所谓
<div id="app"> <ul> <li v-for="item in names" :key="item">{{item}}</li> //key不要绑定index key要绑定唯一性的 </ul> </div> </body> <script> const app = new Vue({ el:"#app", data:{ info:{ name:'34', age:11, height:20 } } }) </script>