解析v-for在vue常用循环遍历指令中的使用

vue中循环遍历使用的指令是v-for

1 . v-用于遍历数组

(arr中的值遍历数组中的元素

arr中的(2)(值，索引)遍历数组中的元素和数组下标

运行代码：

body div class=' box ' ul Li v-for=' arr中的值“{value}}/libr li v-for='(value，Index)inar“{ value } }-{ { Index } }/Li/ul/div脚本src=' http : js/vue . js '/script script new vue({ El : })。box '，data: {arr3360 ['哈哈'，/script/body输出：

2.v-for遍历json对象

(1)json中的值遍历JSON对象中的值

(2)json中的(值、键)遍历JSON对象中的值和键

(3)(值、键、索引)遍历json对象中的值、键和索引

运行代码：

body div class=' box ' ul Li v-for=' json中的值' {value}}/libr li v-for='(值，键)json中的值' {value}} - {{key}}/libr li v-for='(值，键，索引)JSON中的值' { value } }-{ { key } }-{ { index } }/Li/ul/div script src=' http : js/Vue . js '/script script new Vue({ El 33366box '、Dataa : { js : { Baidu : ' Baidu '、搜狐：' Sohu '、搜狗： '搜狗' } } })；/script/body输出：

3 . v-用于遍历整数

(1)整数中的n遍历1~整数，整数从1开始

整数中的(2)(n，index)遍历1~ integer，整数从1开始，索引从0开始

运行代码：

body div class=' box ' ul Li v-for=' n in 3 ' { n } }/LiBr Li v-for='(n，index)in 3 ' { n } }-{ { index } }/Li/ul/div script src=' http : js/Vue . js '/script script new Vue({ El : })。box '、data : { })；/script/body输出：

当然，v-for也可以用在模板中，但我不想写这个

摘要

以上是v-for的用法，这是边肖在vue中介绍的一种常见的循环遍历指令。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！