vue的v-for的使用,vue.js v-for
这篇文章介绍了vue。j中迭代指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、什么是v-for指令
在vue。j中，我们可以使用迭代指令基于源数据重复渲染元素。也就是说可以使用迭代指令实现遍历功能，包括遍历数组、对象、数组对象等。
二、遍历数组
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题文档/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
el:#my ，//el即元素，表示挂载的元素，不能挂载在超文本标记语言和身体元素上面
数据：{
数组：[1,2,3,4],//数组
},
//方法
方法：{
}
})
}
/脚本
/头
身体
div id=我的
差异
氕下面的使用迭代遍历数组/h1
差异
氕只显示值/h1
保险商实验所
Li v-for= v in array"{ v } }/Li
/ul
/div
差异
氕显示值和索引/h1
保险商实验所
li v-for= (v，index) in array 值：{{v}}，对应的索引：{{index}}/li
/ul
/div
/div
/div
/body
/html
其中指数表示数组的索引
效果如下图所示：
注意：最新的版本中已经移除了$索引获取数组索引的用法
三、遍历对象
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题文档/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
el:#my ，//el即元素，表示挂载的元素，不能挂载在超文本标记语言和身体元素上面
数据：{
数组：[1,2,3,4],//数组
},
//方法
方法：{
}
})
}
/脚本
/头
身体
div id=我的
差异
氕下面的使用迭代遍历数组/h1
差异
氕只显示值/h1
保险商实验所
Li v-for= v in array"{ v } }/Li
/ul
/div
差异
氕显示值和索引/h1
保险商实验所
li v-for= (v，index) in array 值：{{v}}，对应的索引：{{index}}/li
/ul
/div
/div
/div
/body
/html
效果如下图所示：
四、遍历数组对象
代码示例如下：
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
meta http-equiv= X-UA-Compatible content= ie=edge
标题使用迭代指令遍历数组对象/标题
！-引入vue.js -
脚本src= node _ modules/vue/dist/vue。js /脚本
脚本
window.onload=function(){
//构建某视频剪辑软件实例
新Vue({
el:#my ，//el即元素，表示挂载的元素，不能挂载在超文本标记语言和身体元素上面
数据：{
列表：[
{姓名：凯文，年龄：23},
{姓名：汤姆，年龄：25}，
{姓名： joy ，年龄：28}
]
},
//方法
方法：{
}
})
}
/脚本
/头
身体
div id=我的
差异
H1下面用v-for来遍历数组对象/h1。
差异
H1只显示值/h1。
保险商实验所
Li-for=列表中的列表名称值：{{list.name}}，年龄值：{{list.age}}/li
/ul
/div
差异
H1显示值和键/h1
保险商实验所
Li-for= (list，index) in lists name值：{{list.name}}，age值：{{list.age}}，相应的键：{{index}}/li
/ul
/div
/div
/div
/body
/html
效果如下图所示：
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。