vue.js 的循环渲染是依赖于 v-for 指令，它能够根据 vue 的实例里面的信息，循环遍历所需数据，然后渲染出相应的内容。它可以遍历数组类型以及对象类型的数据，js 里面的数组本身实质上也是对象，这里遍历数组和对象的时候，方式相似但又稍有不同。
对象遍历
value 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key/index 都是可选参数，如果不需要，这个指令其实可以写成 v-for="value in me"；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{ object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<div v-for="(value, key,index) in object">
{{ index }} : {{ key }} : {{ value }}
</div>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{ object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
</script>
</body>
</html>
数组遍历
数组遍历和对象遍历相类似，最大的不同点在于对象的 “key” 和 “index” 是一致的，所以这里我们只需要取一个 index 即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<ul>
<li v-for="(item, index) in items" v-on:click="onclick(index)">{{index}}：{{item}}</li>
</ul>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
items: ['apple', 'tomato', 'banana', 'watermelon']
},
methods:{
onclick(index){
alert(index);
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="demo">
<ul>
<li v-for="todo in items">
{{ todo.message}}
</li>
</ul>
<ul>
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
</div>
<script>
var demo = new Vue({
el:'#demo',
data:{
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
],
}
})
</script>
</body>
</html>
