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

网友投稿 565 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}}