Vue.js中v-for指令的用法介绍 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}}

效果如下图所示：

文章图片

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

Vue.js中v-for指令的用法介绍