Vue.js中v-for指令的用法介绍
一、什么是v-for指令
【Vue.js中v-for指令的用法介绍】在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能,包括遍历数组、对象、数组对象等。
二、遍历数组
代码示例如下:
Document - 锐客网 下面的使用v-for遍历数组只显示值显示值和索引
- {{v}}
- 值:{{v}},对应的索引:{{index}}
其中index表示数组的索引
效果如下图所示:
文章图片
注意:最新的版本中已经移除了$index获取数组索引的用法三、遍历对象 代码示例如下:
Document - 锐客网 下面的使用v-for遍历数组只显示值显示值和索引
- {{v}}
- 值:{{v}},对应的索引:{{index}}
效果如下图所示:
文章图片
四、遍历数组对象 代码示例如下:
使用v-for指令遍历数组对象 - 锐客网 下面的使用v-for遍历数组对象只显示值显示值和键
- name值:{{list.name}},age值:{{list.age}}
- name值:{{list.name}},age值:{{list.age}}, 对应的键:{{index}}
效果如下图所示:
文章图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- C++成员函数中const的使用详解
- MAUI中实现构建跨平台原生控件
- ASP.NET中Web|ASP.NET中Web API解决跨域问题
- C++中类的转换函数你了解吗
- C++设计模式中的观察者模式一起来看看
- 杂记|免费的编程中文书籍索引
- C/C++系列|C++中将字符(串)转化成数字,将数字转化成字符(串)
- 前端|前端中一些数值类型的输出结果
- Lua中如何实现类似gdb的断点调试—06断点行号检查与自动修正
- Web|Web API中使用Autofac实现依赖注入