zoukankan      html  css  js  c++  java
  • Vue基础之v-for指令的四种使用方式(3)

    v-for中key的使用注意事项

    须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值

    <p v-for="item in list" :key="item.id">

      list: [
        { id: 1, name: '李斯' },
        { id: 2, name: '嬴政' },
        { id: 3, name: '赵高' },
        { id: 4, name: '韩非' },
        { id: 5, name: '荀子' }
      ]

    1、v-for循环普通数组?

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

    list: [1, 2, 3, 4, 5, 6]

    2、v-for循环对象数组?

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

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

    3、v-for循环对象?

    <p v-for="(val, key, i) in user">值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}</p>

    注意:在遍历对象身上的键值对的时候, 除了 有  val  key  ,在第三个位置还有 一个 索引

      user: {
        id: 1,
        name: '托尼·屎大颗',
        gender: '男'
      }

    4、v-for迭代数字?

    <p v-for="count in 10">这是第 {{ count }} 次循环</p>

    注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始

     

     

     

     

     

     

     

     

     

     

     

     

  • 相关阅读:
    分页精度
    abp zero core 启动vue项目
    swagger 配置错误
    .net core 3.0配置跨域
    .net core 3.0 swagger
    .net core 3.0一个记录request和respose的中间件
    .net Core3.0 +Nlog+Sqlserver
    .net core 3.0+unit of work (一)
    .NetCore 3.0迁移遇到的各种问题
    open xml 导出excel遇到的问题
  • 原文地址:https://www.cnblogs.com/JonaLin/p/12891017.html
Copyright © 2011-2022 走看看