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

这篇文章介绍了Vue.js中v-for指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下 一、什么是v-for指令

在Vue.js中，我们可以通过使用v-for指令重复呈现基于源数据的元素。也就是说，可以使用v-for指令实现遍历功能，包括遍历数组、对象、数组对象等。

二、遍历数组

代码示例如下:

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;Documentlt;/titlegt; lt;!--引入vue.js--gt; lt;script src="node_modules/vue/dist/vue.js" gt;lt;/scriptgt; lt;scriptgt; window.onload=function(){ // 构建vue实例 new Vue({ el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面 data:{ array:[1,2,3,4],//数组 }, // 方法 methods:{ } }) } lt;/scriptgt;lt;/headgt;lt;bodygt; lt;div id="my"gt; lt;divgt; lt;h1gt;下面的使用v-for遍历数组lt;/h1gt; lt;divgt; lt;h1gt;只显示值lt;/h1gt; lt;ulgt; lt;li v-for=" v in array"gt;{{v}}lt;/ligt; lt;/ulgt; lt;/divgt; lt;divgt; lt;h1gt;显示值和索引lt;/h1gt; lt;ulgt; lt;li v-for=" (v,index) in array"gt;值:{{v}},对应的索引:{{index}}lt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;/divgt;lt;/bodygt;lt;/htmlgt;

其中index表示数组的索引。

效果如下图所示:

注意:在最新版本中，已经删除了使用$index来获取数组索引的功能。

三、遍历对象

代码示例如下:

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;Documentlt;/titlegt; lt;!--引入vue.js--gt; lt;script src="node_modules/vue/dist/vue.js" gt;lt;/scriptgt; lt;scriptgt; window.onload=function(){ // 构建vue实例 new Vue({ el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面 data:{ array:[1,2,3,4],//数组 }, // 方法 methods:{ } }) } lt;/scriptgt;lt;/headgt;lt;bodygt; lt;div id="my"gt; lt;divgt; lt;h1gt;下面的使用v-for遍历数组lt;/h1gt; lt;divgt; lt;h1gt;只显示值lt;/h1gt; lt;ulgt; lt;li v-for=" v in array"gt;{{v}}lt;/ligt; lt;/ulgt; lt;/divgt; lt;divgt; lt;h1gt;显示值和索引lt;/h1gt; lt;ulgt; lt;li v-for=" (v,index) in array"gt;值:{{v}},对应的索引:{{index}}lt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;/divgt;lt;/bodygt;lt;/htmlgt;

效果如下图所示:

四、遍历数组对象

代码示例如下:

lt;!DOCTYPE htmlgt;lt;html lang="en"gt;lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;使用v-for指令遍历数组对象lt;/titlegt; lt;!--引入vue.js--gt; lt;script src="node_modules/vue/dist/vue.js" gt;lt;/scriptgt; lt;scriptgt; window.onload=function(){ // 构建vue实例 new Vue({ el:"#my",// el即element，表示挂载的元素，不能挂载在HTML和body元素上面 data:{ lists:[ {name:"kevin",age:23}, {name:"tom",age:25}, {name:"joy",age:28} ] }, // 方法 methods:{ } }) } lt;/scriptgt;lt;/headgt;lt;bodygt; lt;div id="my"gt; lt;divgt; lt;h1gt;下面的使用v-for遍历数组对象lt;/h1gt; lt;divgt; lt;h1gt;只显示值lt;/h1gt; lt;ulgt; lt;li v-for=" list in lists"gt;name值:{{list.name}},age值:{{list.age}}lt;/ligt; lt;/ulgt; lt;/divgt; lt;divgt; lt;h1gt;显示值和键lt;/h1gt; lt;ulgt; lt;li v-for=" (list,index) in lists"gt;name值:{{list.name}},age值:{{list.age}}, 对应的键:{{index}}lt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;/divgt;lt;/bodygt;lt;/htmlgt;

效果如下图所示:

这就是本文的全部内容。希望对大家的学习有帮助