一、v-for循环普通数组
- item是自定义名称，对应数组里的小明、小丽、小红 ...，in后面是list这个普通数组
- 看代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>vue如何使用v-for循环普通数组</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<style type="text/css">
span {
padding: 0 10px;
}
</style>
</head>
<body>
<div class="" id="app">
<p v-for="(item,index) in list">
<span>索引：{{index}}</span>
<span>名称：{{item}}</span>
</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
list: ['小明', '小丽', '小红', '小米']
}
})
</script>
</html>
索引：0 名称：小明
索引：1 名称：小丽
索引：2 名称：小红
索引：3 名称：小米
二、v-for循环对象数组
- item是自定义名称，对应数组里每一条记录{name,age}，in后面是list这个对象数组
- 看代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>vue如何使用v-for循环对象数组</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<style type="text/css">
span {
padding: 0 10px;
}
</style>
</head>
<body>
<div class="" id="app">
<p v-for="(item,index) in list">
<span>索引：{{index}}</span>
<span>名称：{{item.name}}</span>
<span>年龄：{{item.age}}</span>
</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
list: [
{name: '小明', age: 19},
{name: '小丽', age: 20},
{name: '小红', age: 18},
{name: '小米', age: 21}
]
}
})
</script>
</html>
索引：0 名称：小明 年龄：19
索引：1 名称：小丽 年龄：20
索引：2 名称：小红 年龄：18
索引：3 名称：小米 年龄：21
三、v-for循环一个对象里的所有属性的名称和值
- value代表一个属性的属性值，name代表属性名称，index还是值索引
- 看代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>vue如何使用v-for循环对象属性</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<style type="text/css">
span {
padding: 0 10px;
}
</style>
</head>
<body>
<div class="" id="app">
<p v-for="(value,name,index) in car">
<span>索引：{{index}}</span>
<span>属性名称：{{name}}</span>
<span>属性值：{{value}}</span>
</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
car: {
name: '比亚迪宋',
date: '2017年',
money: '15万'
}
}
})
</script>
</html>
索引：0 属性名称：name 属性值：比亚迪宋
索引：1 属性名称：date 属性值：2017年
索引：2 属性名称：money 属性值：15万
四、vue如何使用v-for遍历一个整数值范围
- v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
- 看代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>vue如何使用v-for遍历一个整数值范围</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<style type="text/css">
span {
padding: 0 10px;
}
</style>
</head>
<body>
<div class="" id="app">
<span v-for="n in 10">{{ n }}</span>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app'
})
</script>
</html>
12345678910