v-for循環(huán)普通數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-for="user in users">{{ user }}</p>
<p v-for="(user, index) in users">value：{{ user }} ----- key：{{ index }}</p>
</div>
<script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
users: [0, 1, 2, 3, 4]
}
})
</script>
</body>
</html>
v-for循環(huán)對(duì)象數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-for="user in users">{{ user }}</p>
<p v-for="(user, index) in users">value：{{ user }} ----- key：{{ index }}</p>
<p v-for="(user, index) in users1">對(duì)象name：{{ user.name}} ----- 對(duì)象age：{{ user.age}} ---- 索引：{{ index }}</p>
</div>
<script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
users: [0, 1, 2, 3, 4],
users1: [
{name:'小王', age: '20'},
{name:'小張', age: '21'},
{name:'小李', age: '22'}
]
}
})
</script>
</body>
</html>
v-for循環(huán)對(duì)象屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p v-for="user in users">{{ user }}</p>
<p v-for="(user, index) in users">value：{{ user }} ----- key：{{ index }}</p>
<p v-for="(user, index) in users1">對(duì)象name：{{ user.name}} ----- 對(duì)象age：{{ user.age}} ---- 索引：{{ index }}</p>
<p v-for="(value, key, index) in users2">屬性值：{{ value }} , 屬性key：{{ key }} , 索引：{{ index }}</p>
</div>
<script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
users: [0, 1, 2, 3, 4],
users1: [
{name:'小王', age: '20'},
{name:'小張', age: '21'},
{name:'小李', age: '22'}
],
users2:{ name:'小王', age: '20', sex: '男' }
}
})
</script>
</body>
</html>
v-for迭代數(shù)字
<p v-for="count in 10">{{ count }}</p>
注意點(diǎn)：2.2.0+后，v-for循環(huán)中必須指定唯一的數(shù)字類型/字符串類型的key值。（盡量都寫(xiě)）
【為了更高效的更新虛擬DOM】
<p v-for="(value, key, index) in users" :key="users.age"></p>
