v-for 指令的四种使用方式

1. 循环普通数组

<ul>
        <!-- v-for 可以循环数据  item 是数组 list 的单元项, index 是单元项对应的下标 -->
        <li v-for='(item, index) in list' :key="index">{{item}}</li>
    </ul>
data: {
          list: [ '第一课的内容', '第二课的内容' ]  
        }

2. 循环对象数组

 <ul>
        <li v-for='(item, index) in list' :key="index"> {{ item.name }} ----- {{ item.id }} ----- {{ index }}</li>
    </ul> 
data: {
          list: [ 
              { id: 1, name: "张三" },
              { id: 2, name: "李四" },
              { id: 3, name: "王五" }
          ]  
        }

3. 循环对象

  <ul> 
        <!--总结:数组和对象的 index 和 key 永远都放在小括号里的第二位,item 和 value 放在第一位--> 
        <!--注意: 在遍历对象身上的键值对时,除了有 value, key, 在第三个位置还有 一个索引--> 
        <li v-for="(value, key, index) in obj" :key="index">值是: {{ value }} ----- 键是 {{ key }} ---- 索引是{{ index }}</li> 
    </ul> 
data: {
          obj: { 
              id: 1, 
              name: "田女士",
              gender: "女"
               }   
        }

4. 循环数字

 <ul> 
        <!-- in 后面我们放过 普通数组,对象数组,对象,还可以放数字 --> 
        <!-- 注意:如果使用v-for迭代数字的话,前面的count 值从1开始 --> 
        <li v-for="count in 10" :key="count">这是第 {{ count }} 次循环</li> 
    </ul> 

注意

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

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » v-for 指令的四种使用方式

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注