v-for指令作用:
循环遍历普通数组、对象数组、对象、数字等。
<template> <span> <!-- 遍历普通数组 --> <div v-for="(item,i) in arrList">{{i}} {{item}}</div> <!-- 遍历对象数组 --> <div v-for="(item,i) in arrListObj">{{item.id}} {{item.name}} {{i}}</div> <!-- 遍历对象 --> <div v-for="(val,key,i) in obj">{{val}} {{key}} {{i}}</div> <!-- 遍历数字--> <div v-for="(item,i) in 3">{{item}} {{i}} </div> </span> </template> <script> export default { data() { return { arrList: ['php', 'asp', 'java'], arrListObj: [{ id: 1, name: 'php' }, { id: 2, name: 'asp' }, { id: 3, name: 'java' }], obj: { id: 1, name: 'vue.js', desc: ' 理念:数据驱动视图和组件化' } } } } </script>