2.遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td v-for="value in person">
{{value}}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
person:{
name:"李明",
age:24,
address:"上海"
}
}
})
</script>
</body>
</html>
运行结果:
通过v-for将person对象的元素显示在表格中。
2.1 两个参数遍历对象
在遍历也可以提2个的参数分别表示键和值:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td v-for="(value,key) in person">
{{ key }}
</td>
</tr>
<tr>
<td v-for="(value,key) in person">
{{value}}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
person:{
name:"李明",
age:24,
address:"上海"
}
}
})
</script>
</body>
</html>
运行结果如下:
2.2 三个参数遍历对象
提供三个参数遍历对象,这三个参数分别是:索引、键、值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td v-for="(value,key,index) in person">
{{ index }}
</td>
</tr>
<tr>
<td v-for="(value,key,index) in person">
{{ key }}
</td>
</tr>
<tr>
<td v-for="(value,key,index) in person">
{{value}}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
person:{
name:"李明",
age:24,
address:"上海"
}
}
})
</script>
</body>
</html>
运行结果