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 指令的四种使用方式
点赞

发表评论

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