前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue.js入门笔记 v-for循环

Vue.js入门笔记 v-for循环

作者头像
Meng小羽
修改2019-12-24 14:28:25
1.2K0
修改2019-12-24 14:28:25
举报
文章被收录于专栏:Debug客栈

可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名

v-for 循环普通数组

代码语言:javascript
复制
<div id="app">
    <p v-for="(item, i) in data">
        索引是{{ i }} --- 内容是{{ item }}
    </p>
</div>

js:
data : {
    data : [1,2,3,4,5],
},

v-for 循环对象数组

代码语言:javascript
复制
<div id="app">
    <p v-for="(item, i) in data1">
        索引是:{{ i }} -- - 内容是{{ item.id }}--{{ item.name }}
    </p>
</div>

js:
data: {
    data1: [
        { id: 1, name: "name1" },
        { id: 2, name: "name2" },
        { id: 3, name: "name3" }
    ]
},

v-for 循环对象

代码语言:javascript
复制
<div id="app">
    <p v-for="(data, key, i) in user">
        索引:{{ i }},键值:{{ key }},内容:{{ data }}
    </p>
</div>

js:
data: {
    user: {
        id: 1,
        name: "tim",
        age: 18,
        width: 200
    }
},

v-for 迭代数字

代码语言:javascript
复制
<div id="app">
    <p v-for="count in 10">{{ count }}</p>
</div>

2.2.0+ 的版本里,当在组件上使用 v-for 时,key 现在是必须的。

不自动将 item 注入到组件里的原因是,这会使得组件与 v-for 的运作紧密耦合。明确组件数据的来源能够使组件在其他场合重复使用。

本文链接:https://cloud.tencent.com/developer/article/1558552

本文采用CC BY-NC-SA 3.0 Unported协议进行许可,转载请保留此文章链接

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • v-for 循环普通数组
  • v-for 循环对象数组
  • v-for 循环对象
  • v-for 迭代数字
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档