序

在Vue.js中，v-for指令需要以item in items形式的特殊语法，item是源数据数组，item是数组元素迭代的别名。

V-for可以将数据绑定到数组以呈现列表：

div id=' wantuikija ' ol Li v-for=' site in sites ' { site . name } }/Li/ol/div script new Vue({ El : ' # wantuikijia '，Data: { sites :[{name: ' Internet Push Home ' }，{name3360' Google' }，{ name : '淘宝' } })/script输出：

在模板中使用v-for:

div id=' wantuizhijia ' ul模板v-for=' place in places ' Li { { place . name } }/Li Li-/Li/template/ul/div script new Vue({ El : ' # wantuizija '，data : { place 3360[{name: '厦门' }，{name3360 '漳州' }，{ name : '福州' } })/脚本效果：

V-for可以通过对象的属性迭代数据：

div id=' wangtuizhia ' ul Li v-for='对象中的值' { value } }/Li/ul/div script new Vue({ El : ' # wangtuizhia '，Data: { object : { name : ' we '，URL : '/www . JB 51 . net '，slogan: '美好生活，等待你的创造！'} } })/脚本效果：

我们

//www.jb51.net

美好生活，等待你的创造！

V-for遍历一个对象的属性，并可以提供第二个参数作为键名：

div id=' wangtuizhia ' ul Li v-for='(value，key)在对象' { key } } : { { value } }/Li/ul/div script new Vue({ El : ' # wangtuizhia '，data : { object : { name : ' we '，URL : '/www . JB 51 . net '，slogan: '美好生活，等待你的创造！'} } })/脚本效果：

命名： us

url : //www.jb51.net

口号：过上更好的生活，等待你的创造！

V-for遍历对象的属性，第三个参数作为索引：

div id=' wangtuizhia ' ul Li v-for='(值、键、索引)在对象' { index } } { { key } } : { { value } }/Li/ul/div script new Vue({ El : ' # wangtuizhia '，Data: { object : { name : ' we '，url:'//www.jb51.net '，slogan: '美好生活，等待你的创造} } })/脚本效果：

0名称：美国

1 url://www.jb51.net

2 slogan:美好生活，等待你的创造！

V-for也可以循环整数

div id=" wangtouzhijia " ulli v-for=" n in 10 " { { n } }/Li/ul/divscriptnewvue({ El : ' # wangtouzhijia ' })/脚本/主体效果：

12345678910的摘要

以上就是本文的全部内容。希望本文的内容能给你的学习或工作带来一些帮助。有问题可以留言交流。谢谢你的支持。