侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

vue遍历对象数组的方法(v-for遍历对象数组)

2022-06-20 星期一 / 0 评论 / 0 点赞 / 50 阅读 / 4039 字

做前端开发仔都知道vue的循环就是v-for了,vue遍历对象数组的方法就是用v-for,本文讲解vue遍历普通数组方法、vue遍历对象数组方法、vue遍历对象的方法、vue遍历数字方法,v-for遍历对象数组。1、vue遍历普通数组方法①创

做前端开发仔都知道vue的循环就是v-for了,vue遍历对象数组的方法就是用v-for,本文讲解vue遍历普通数组方法、vue遍历对象数组方法、vue遍历对象的方法、vue遍历数字方法,v-for遍历对象数组。

1、vue遍历普通数组方法

①创建vue对象

<script>//创建Vue实例,得到ViewModelvar vm = new Vue({el: '#app',data: {  list: [1, 2, 3, 4, 5, 6]},methods: {}});</script>

② 循环数据

<div id="app">  <p v-for="(item,  i) in list”)索引值:{{i}}---每一项:{{item}}</p ></div>

结果:

vue遍历对象数组的方法

2、vue遍历对象数组方法

① 创建vue实例对象

vue遍历对象数组的方法

② 循环对象数组

vue遍历对象数组的方法

结果:

vue遍历对象数组的方法

3、vue遍历对象方法

①创建vue对象实例

vue遍历对象数组的方法

②循环对象

vue遍历对象数组的方法

结果:

vue遍历对象数组的方法

4、vue遍历数字方法

①创建vue对象实例

vue遍历对象数组的方法

②循环数字

vue遍历对象数组的方法

结果:

vue遍历对象数组的方法

5、v-for中key的使用方式

①创建vue对象实例

注意:push()方法一般是添加到数组的最后的位置;unshift()方法是往最前面的位置添加。

vue遍历对象数组的方法

②循环

需要注意:

v-for循环的时候,key属性只能使用number或String。

key在使用的时候,必须使用v-bind属性绑定的形式,指定key的值。

在组件中使用v-for循环的时候,或者在一些特殊情况中,如果v-for有问题,必须在使用v-for的同时,指定唯一的 字符串/数字 类型 :key值。

vue遍历对象数组的方法

结果:

vue遍历对象数组的方法

广告 广告

评论区