• 14 vue中v-for 循环对象数组


    vue中的v-for 循环对象数组。循环的主体不会变 ,主要模式还是

      <p v-for="item in list">{{item}}</p>

    data如下

    data: {
    list: [
    { id: 1, name: 'zs1' },
    { id: 2, name: 'zs2' },
    { id: 3, name: 'zs3' },
    { id: 4, name: 'zs4' }
    ]
    },

    刻意知道list数组中,不是单纯地 数字,而是 每一个对象。所以

      <p v-for="item in list">{{item}}</p> 循环得到结果是:

    { "id": 1, "name": "zs1" }

    { "id": 2, "name": "zs2" }

    { "id": 3, "name": "zs3" }

    { "id": 4, "name": "zs4" }

    按照要求来说。我们通常项目中, 会拿到对象中单独的每一个属性。 获取某个属性的属性值,满足需求。所以可以操作为

     <p v-for=" (item , i ) in  list">  id是 {{item.id}} </p>

    需要注意的是以下的对比问题和对应结

    1.<p v-for=" (item , i ) in list"> ' id是'+{{item.id}} </p>
    2.<p v-for=" (item , i ) in list"> id是 '+' {item.id}} </p>
    3.<p v-for=" (item , i ) in list"> id是 {{item.id}} </p>

    结果分别是  

    1.

    ' id是'+1

    ' id是'+2

    i2.

    d是 '+' {item.id}}

    id是 '+' {item.id}}

    3.

    id是 1

    id是 2

    通过显示情况。我们知道。 第三种才是我们最需要的方式 

      <p v-for=" (item , i ) in  list">  id是 {{item.id}}  --名字 {{item.name}} -- 索引是 {{i}}</p>

    呈现结果

    id是 1 --名字 zs1 -- 索引是 0

    id是 2 --名字 zs2 -- 索引是 1

    id是 3 --名字 zs3 -- 索引是 2

    id是 4 --名字 zs4 -- 索引是 3

  • 相关阅读:
    iOS 日期格式
    时间复杂度、空间复杂度
    转载 -- 算法题
    奇奇怪怪的Bug
    iOS12中推送通知新特性
    iOS开发网络篇—Socket编程
    iOS:菜单控制器和菜单项:UIMenuController和UIMenuItem
    关于textField输入光标颜色及cleanButton大小和颜色的设置
    腾讯云开发微信小程序使用体验
    简单理解JavaScript原型链
  • 原文地址:https://www.cnblogs.com/maomao-Sunshine/p/11690509.html
Copyright © 2020-2023  润新知