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

一、什么是v-for指令 【Vue.js中v-for指令的用法介绍】在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素。也就是说可以使用v-for指令实现遍历功能,包括遍历数组、对象、数组对象等。
二、遍历数组 代码示例如下:

Document - 锐客网下面的使用v-for遍历数组只显示值
  • {{v}}
显示值和索引
  • 值:{{v}},对应的索引:{{index}}

其中index表示数组的索引
效果如下图所示:
Vue.js中v-for指令的用法介绍
文章图片

注意:最新的版本中已经移除了$index获取数组索引的用法
三、遍历对象 代码示例如下:
Document - 锐客网下面的使用v-for遍历数组只显示值
  • {{v}}
显示值和索引
  • 值:{{v}},对应的索引:{{index}}

效果如下图所示:
Vue.js中v-for指令的用法介绍
文章图片

四、遍历数组对象 代码示例如下:
使用v-for指令遍历数组对象 - 锐客网下面的使用v-for遍历数组对象只显示值
  • name值:{{list.name}},age值:{{list.age}}
显示值和键
  • name值:{{list.name}},age值:{{list.age}}, 对应的键:{{index}}

效果如下图所示:
Vue.js中v-for指令的用法介绍
文章图片

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

    推荐阅读