首页 > web前端 > Vue.js > 正文

vue中v-for的用法是什么

WBOY
发布: 2022-03-17 10:52:19
原创
15923 人浏览过

用法:1、利用“v-for="(item,i) in list"”循环普通数组;2、利用“v-for="(user,i) in list"”循环数组对象;3、利用“v-for="(val,key,i) in user"”循环对象。

vue中v-for的用法是什么

本文操作环境:windows10系统、Vue2.9.6版,DELL G3电脑。

vue中v-for的用法是什么

v-for的几种应用方式:

方式一:v-for循环普通数组

//土蛋方法:
<p>{{list[0]}}</p>
<p>{{list[1]}}</p>
<p>{{list[2]}}</p>
<p>{{list[3]}}</p>
<p>{{list[4]}}</p>

//v-for方法:
<p v-for="(item,i) in list">{{i}},{{item}}</p>

//数组数据部分:
data:{
    list:[1,2,3,4,5,6]
},
登录后复制

方式二:v-for循环对象数组

//v-for用法:
<p v-for="(user,i) in list">{{user.id}},{{user.name}},{{i}}</p>

//数组数据部分:
list:[
    {id:1,name:"zs1"},
    {id:2,name:"zs2"},
    {id:3,name:"zs3"},
    {id:4,name:"zs4"},
]
登录后复制

方式三:v-for循环对象

注意:在遍历对象身上的键值对的时候,除了有 val key,在第三个位置还有一个索引值

//v-for方法
<p v-for="(val,key,i) in user">{{val}},{{key}}</p>


//对象部分:
user:{
    id:1,
    name:"巧克力"
    gender:"萌妹"
}
登录后复制

方式四:v-for迭代数组

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

【相关推荐:《vue.js教程》】

以上是vue中v-for的用法是什么的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
vue
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!