Vue学习之--------列表渲染、v-for中key的原理、列表过滤的实现（2022/7/13）

网友投稿 583 2022-09-02

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}}