vue指令 v-for
1. v-for
<strong>v-for指令</strong> 基于数据渲染一个列表，类似于JS中的遍历。
-
其数据类型可以是 <strong>Array | Object | number | string </strong>。
该指令之值，必须使用特定的语法
item in items, 为当前遍历元素提供别名。v-for的优先级别高于v-if之类的其他指令
<body>
<div id="app">
<!--<p v-for="s in scores">{{s}}</p>-->
<!--注意in 前第一个参数,默认是value-->
<p v-for="(value, index) in scores">{{value}}-{{index}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
scores:[90, 80, 70, 60, 50]
}
})
</script>
-
另外v-for也可以为数组索引指定别名（或者用于对象的键）：
<div v-for="(item, index) in items"></div> <div v-for="(val, key) in object"></div> <div v-for="(val, key, index) in object"></div>
2. v-for案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app{
margin: 50px auto;
width: 600px;
}
table{
width: 600px;
border: 1px solid #000;
text-align: center;
}
thead{
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr v-for="person in personArr">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:'#app',
data:{
personArr:[
{name:'张三', age:22, sex:'男'},
{name:'李四', age:33, sex:'女'},
{name:'王五', age:44, sex:'男'}
]
}
});
</script>
</html>
