vue中v-for的用法

当需要将一个数组遍历或枚举一个对象循环显示时候,我常用的就是列表渲染指令v-for. 它需要结合着in 或者of来使用,如下

<div id="app">
	<ul>
		<li v-for="(person, index) in persons"> {{ person.name }} </li>
	</ul>
</div>
<script>
	var app= new Vue ({
	el: "#app",
	data () {
		return {
			persons: [
				{ name: "岚枫秋秋"},
				{ name: 'Json'}
			]
		}
	}
})
</script>

在表达式中,persons是数据,person是当前的一条数据, index代表当前索引值。列表渲染也可以用 of 来代替 in 作为分隔符。
当遍历对象属性时候,有两个可选参数,分别键名和索引值。

<div id="app">
	<ul>
		<li v-for="(val, key,  index) in persons"> {{ person.index }} - {{ person.key }}: {{ person.val }} </li>
	</ul>
</div>
<script>
	var app= new Vue ({
	el: "#app",
	data () {
		return {
			persons: { 
				name: "岚枫秋秋",
				age: '29'
			}
		}
	}
})
</script>

和v-if一样,v-for可以用到template上,但是v-show不能用到template上。

vue在渲染元素时候,出于效率考虑,会尽可能复用已有的元素而非重新渲染,如果不希望这样,可以使用vue提供的key属性,可以让你自己决定是否要复用元素,key的值必须是唯一的

©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值