猿站网:v-for 指令的四种使用方式

1. 循环式一般字符串

  • {{item}}
data: {
          list: [ 桑泰的文本, 鲑鲈的文本 ]  
        }

2. 循环式第一类字符串

    v-for=(item, index) in list:key="index"> {{ item.name }} ----- {{ item.id }} ----- {{ index }}
data: {
          list: [ 
              { id: 1, name: "张三" },
              { id: 2, name: "李四" },
              { id: 3, name: "霍元甲" }
          ]  
        }

3. 循环式第一类

    v-for="(value, key, index) in obj":key="index">值是: {{ value }} ----- 键是 {{ key }} ---- 索引是{{ index }}
data: {
          obj: { 
              id: 1, 
              name: "田女士",
              gender: "女"
               }   
        }

4. 循环式数字

    v-for="count in 10":key="count">这是第 {{ count }} 次循环式

注意

1. key 属性的值只能采用 number 或者 string 类型;(不推荐采用 index 作为唯一的 key 值,推荐采用 item.id (后台统计数据里的id)); 
2. key 在采用的时候,必须采用 v-bind 属性绑定的形式,指定 key 的值; 
3. 当在组件中采用 v-for 时, key 是必须的: 
     v-for="(item, index) in list":item="item":index="index":key="item.id" 
     > 
      
 
4. 任何统计数据都不会自动传递到组件里面,因为组件有自己独立的作用域。 
如果要传递统计数据到组件,需要用 props。

建站知识

猿站网:微信小程序页面跳转url传参,对象数据过长问题

2022-5-20 22:19:54

建站知识

小知识:vue+element table的二次封装

2022-5-20 22:30:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索