vue自学笔记-v-for指令学习（五）
程序员文章站
2022-05-16 14:06:56
...
v-for循环普通数组
<!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循环对象数组
<!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">对象name：{{ user.name}} ----- 对象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循环对象属性
<!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">对象name：{{ user.name}} ----- 对象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迭代数字
<p v-for="count in 10">{{ count }}</p>
注意点：2.2.0+后，v-for循环中必须指定唯一的数字类型/字符串类型的key值。（尽量都写）
<p v-for="(value, key, index) in users" :key="users.age"></p>