Vue指令之列表渲染
1. v-for 指令简介
v-for 指令基于一个数组来渲染一个列表。
v-for 指令需要使用
item in/of items
形式的语法其中 items 是源数据数组,item 是被迭代的数组元素别名
支持多种数据格式:
Array | Object | number | string | lterable(2.6新增)
2. v-for 指令使用示例
<li v-for="value in users">{{ value }}</li>
<li v-for="value,index in users">{{ index }} => {{ value }}</li>
<li v-for="(value,index) in users">{{ index }} => {{ value }}</li>
3. v-for 指令的各种数据格式场景
(1)、Array
<p v-for="v,k in user">{{ k }} => {{ v }}</p>
<p v-for="v,k in members">{{ v.name }} {{ v.age }}</p>
data: {
user: ['html', 'css', 'javascript'],
members:[
{
name: '张三',
age: 20,
},
{
name: '李四',
age: 25,
},
]
}
(2)、Object
<p v-for="(v, k) in art">{{ k }} {{ v }}</p>
data: {
art: {
title: '标题',
content: '内容'
},
}
(3)、Number
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>
本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!
从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!
本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。
本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。