Vue指令v-遍历输出JavaScript数组和json对象的常用方法总结

在本文中，一个例子讲述了通过遍历Vue指令v-for来输出JavaScript数组和json对象的常见方法。分享给大家参考，如下：

定义数据：

脚本newvue ({el:' # test '，data: {message3360' infor '，list: ['a '，' b '，' c '，' d '，' e']，web: {'Baidu' :' 3360。搜狐' :'https://www.sohu.com '，'新浪' :'https://www.sina.com '，'淘宝' : ' https://www . Taobao.com ' })/脚本HTML结构：

div id=' test ' div { { message } }/div div { { list } }/div div div { { web } }/div/div完整示例：

！doctype html lang=' en ' head meta charset=' utf-8 ' title v-for遍历/title/head body div id=' test ' div { { message } }/div div { { list } }/div div { { web } }/div/div脚本src=' http 3360https://cdn . bootscs.com/Vue/2 . 4 . 4/Vue . min . js '/脚本新Vue({ el:'#test '，淘宝' :' https://www。淘宝网' } })/脚本/正文/html使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun,输出结果：

v-for输出数组的几种方法：

1.仅输出值值

Html代码：

Div id=' test' div v-for='列表中的项' {item}}/div/div使用联机HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun,输出结果：

2.产值和相应的指标值

Html代码：

Div id=' test' div v-for=' (item，index)列表“{item}”的索引值为{{ index }}/div/div。使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun,输出结果：

用v-for输出json格式的几种方法

1.仅输出值值

Html代码：

div id=' test ' div v-for=' web中的项' {item}}/div/div使用联机HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun,输出结果：

2.输出值和键值

Html代码：

网站“{ 0 }”中的Div id=' test' div v-for='(项，键)。网站地址为：{{ item }}/div/div。使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun.输出结果：

3.产值、关键值和指标值指标

Html代码：

Div id=' test' div v-for=' (item，key，index)在web“{ index } } _ _ { { key } }的网址是：{{ item }}/div/div使用联机HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun数，输出结果：

可以看到，在数组中，括号中参数的第一位是值，第二位是json中的索引值，第一位是值，第二位是键值，第三位是索引值

有文章说$index是数组内置变量的数组下标，$key是json内置变量，但是我没有度量，提示错了。我不知道这是否正确。

希望本文对vue.js程序的设计有所帮助。