列表渲染:
v-for
每个列表都要添加key,如果不添加不会有错误,但是会有警告
html:
<div> <ul> <!-- index是索引 --> <li v-for="(value, index) in names"> {{index }}: {{ value }} </li> </ul> <ul> <!-- v-bind 来绑定动态值 (在这里使用简写成 : --> <li v-for="(item,index) in user" :key="index"> <span>{{index}}</span> <span>{{item.name}}</span> <span>{{item.age}}</span> </li> </ul> <!-- 第二个的参数为键名:第三个参数为索引: --> <ul> <li v-for="(value, key, index) in object"> {{ index }}:{{ key }}: {{ value }} </li> </ul> </div>
js
data() { return { names: [ "iwen", "iw", "wen" ], user: [ { name: "iwen", age: 19 }, { name: "iw", age: 20 }, { name: "wen", age: 29 } ], object: { firstName: 'John', lastName: 'Doe', age: 30 } } }
最终效果: