v-for介绍与用法
1. v-for常用来展示列表的数据
2. 语法： v-for="(item, index) in xxx" :key="yyy",其中key是每一项的标识符，如果不指定默认是下标（index）,会在复用时用到，建议用我们的每一项的具有唯一性的id，以便复用和提高渲染性能，如果用index在有可编辑属性或者插入元素时，会降低复用效率，甚至页面元素出错
3.可遍历：数组，对象，字符串（用的很少），指定次数（用的很少）
代码示例
遍历数组
<!-- 遍历数组 -->
<ul v-for="item in list" :key="item.id">
<li>{{ item.name }} -- {{item.sex}} -- {{item.age}}</li>
</ul>
data() {
return {
list: [
{ id: '100', name: '张三', sex: '男', age: 18 },
{ id: '101', name: '李四', sex: '男', age: 20 },
{ id: '102', name: '赵五', sex: '男', age: 30 },
],
}
}
遍历对象
<!-- 遍历对象 -->
<div v-for="(value,key) in { id: '100', name: '张三', sex: '男', age: 18 }" :key="key">
{{ key }} -- {{ value }}
</div>
<!-- 输出 id -- 100 name -- 张三 ...-->
遍历字符串
<!-- 遍历字符串 -->
<div v-for="(c,index) in 'baidu'" :key="index">
<!-- 一次输入各个字符 -->
{{ c }} -- {{index}}
</div>
遍历次数
<!-- 遍历次数 -->
<div v-for="(i,index) in 10">
{{ i }} -- {{index}}
<!-- 输出的i为1 2 3 ... 10 index为0 1 2 ... -->
</div>
