vue的v-for循环普通数组、对象数组、对象、数字

最新推荐文章于 2026-05-01 09:58:23 发布

转载最新推荐文章于 2026-05-01 09:58:23 发布 · 2.8k 阅读

收录于

本文详细介绍了Vue.js中v-for指令的使用方法，包括如何循环遍历数组、对象数组及对象，展示了动态更新UI的技巧。同时，通过具体示例解释了如何在HTML中嵌入JavaScript表达式来显示循环中的数据。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body>  <div id="app">  <span v-for="(u,i) in user">|||{{u}}--索引{{i}}|||</span> <br> <span v-for="(u,i) in object">---{{u.a}}---索引：{{i}}</span> <br> <span v-for="(val,key,i) in app">---值：{{val}}---键{{key}}----索引：{{i}}</span> <br> <span v-for="count in 10">{{count}}</span> </div> <script> // 创建一个vue实例 var vm=new Vue({ el:'#app', // 绑定id为appid容器 data:{ user:[1,2,3,4,5], object:[ {"a":1}, {"a":2}, {"a":3} ], app:{ "a":1, "b":2, "c":3 } } }) </script> </body> </html>