Vue的v-for列表渲染和字符串及指定次数

本文详细介绍了Vue.js中的v-for指令如何用于遍历数组、对象、属性以及字符串,并展示了其在HTML模板中的使用实例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!-- 动态列表 -->
<ul>
	<!--
		1.v-for 要卸载循环项上
		2.v-for的语法规则:
			v-for"(变量名,index) in/of 数组"
			变量名 代表了 数组中的每一个元素
	-->
	<li v-for="name in names">
		{{name}}
	</li>
</ul>
//遍历对象数组vips
<table>
	<tr>
		<th>序号</th>
		<th>会员名</th>
		<th>年龄</th>
		<th>选择</th>
	<tr>
	<tr v-for="(vip, index) in vips">
		<td>{{index + 1}}</td>
		<td>{{vip.name}}</td>
		<td>{{vip.age}}</td>
		<td><input type="checkbox"></td>
	</tr>
</table>

//遍历对象的属性
<ul>
	<li v-for="(value, propertyName) of user">
	</li>
</ul>


//遍历字符串
<ul>
	<li v-for="(c,index) of str">
		{{index}},{{c}}
	</li>
</ul>


//遍历指定次数
 <ul>
 	<li v-for="(num,index) of counter">
 		{{index}},{{num}}
 	</li>
 </ul>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值