Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现(2022/7/13)
文章目录
1、基本列表
1.1 基本知识1.2 代码实例1.3 测试效果
2、key的原理
2.1基本知识2.2 代码实例2.3 测试效果2.4 原理图解
3、列表过滤
3.1 代码实例3.2 实现的效果3.3 补充知识
1、基本列表
1.1 基本知识
v-for指令:
1、用于展示列表数据2、语法:v-for=“(item, index) in xxx” :key=“yyy”(key是唯一的)3、可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
1.2 代码实例
学生列表(遍历数组)
- {{s.name}}-{{s.age}}
汽车信息(遍历对象)
- {{index}}--{{c}}
测试遍历字符串(用得少)
- {{char}}-{{index}}
测试遍历指定次数(用得少)
- {{index}}-{{number}}
学生列表(遍历数组)
- {{s.name}}-{{s.age}}
人员列表
- {{p.name}}-{{p.age}}-{{p.sex}}