猿站网: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。
声明: 猿站网有关资源均来自网络搜集与网友提供,任何涉及商业盈利目的的均不得使用,否则产生的一切后果将由您自己承担! 本平台资源仅供个人学习交流、测试使用 所有内容请在下载后24小时内删除,制止非法恶意传播,不对任何下载或转载者造成的危害负任何法律责任!也请大家支持、购置正版! 。本站一律禁止以任何方式发布或转载任何违法的相关信息访客发现请向站长举报,会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。本网站的资源部分来源于网络,如有侵权烦请发送邮件至:2697268773@qq.com进行处理。
建站知识

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

2022-5-20 22:19:54

建站知识

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

2022-5-20 22:30:14

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