window.onload = function () { var c = new Vue({ el : '#box', data : { arr : [ '张三', 100, '李四', 200 ] } }); } <ul> <li v-for="value in arr">{{value}}</li> </ul>
输出结果：
张三
100
李四
200
如果需要获取当前数组项的索引，可以用{{$index}}
<ul> <li v-for="value in arr">{{value}}----{{$index}}</li> </ul>
输出结果：
张三----0
100----1
李四----2
200----3
v-for还有另外几种形式，输出数组:
window.onload = function () { var c = new Vue({ el : '#box', data : { persons : { name1 : "八戒", name2 : "悟空", name3 : "唐僧" } } }); } <ul> <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li> <hr/> <li v-for="value in persons">{{value}}---{{$index}}----{{$key}}</li> <hr/> <li v-for="(k,v) in persons">{{k}}----{{v}}---{{$index}}---{{$key}}</li> </ul>
输出结果：
八戒---0----name1 悟空---1----name2 唐僧---2----name3 八戒---0----name1 悟空---1----name2 唐僧---2----name3 name1----八戒---0---name1 name2----悟空---1---name2 name3----唐僧---2---name3
总结
以上所述是小编给大家介绍的vue的基本用法与常见指令，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: