v-for指令
类型： Array | Object | number | string
用法： 基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名：
示例：
<div v-for="item in items"> {{ item.text }} </div>代码示例1：
<div id="demo"> <ol> <li v-for="value in arr"> {{value}} </li> </ol> </div> <script type="text/javascript"> new Vue({ el: "#demo", data: { arr:["apple","banana","orange","pear"], json:{a:"张三",b:"李四",c:"王五"} } }) </script>预览：https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for1.html
效果如图：
代码示例2：
<div id="demo"> <ol> <li v-for="value in arr"> {{value}} </li> </ol> <hr /> <ol> <li v-for="(value,index) in arr"> {{value}} {{index}} </li> </ol> <hr /> <ol> <li v-for="(item,index) in json"> {{item}} {{index}} </li> </ol> <hr /> <ol> <li v-for="(val,key) in json"> {{val}} {{key}} </li> </ol> <hr /> <ol> <li v-for="(val,key,index) in json"> {{val}} {{key}} {{index}} </li> </ol> </div> <script type="text/javascript"> new Vue({ el: "#demo", data: { arr:["apple","banana","orange","pear"], json:{a:"张三",b:"李四",c:"王五"} } }) </script>预览：https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for2.html
效果如图：
下面我们通过v-for来实现一个用户信息表
预览：https://ityanxi.github.io/Vue-tutorial/chapter04/07v-for3.html
附完整代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> h1{ text-align: center; } table, td, th { border-collapse: collapse; border-spacing: 0 } table { width: 600px; margin: 0 auto; } td, th { border: 1px solid #bcbcbc; padding: 5px 10px; }
th {
background: #42b983;
font-size: 1.2rem;
font-weight: 400;
color: #fff;
cursor: pointer;
}
tr:nth-of-type(odd) {
background: #fff;
}
tr:nth-of-type(even) {
background: #eee;
}
</style>
</head>
<body>
<div id="app">
<h1>用户信息表</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Sex</th>
<th>Addr</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td>{{ person.addr }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
people: [{
name: "Jack",
age: 30,
sex: "Male",
addr:"重庆"
}, {
name: "Bob",
age: 18,
sex: "Male",
addr:"纽约"
}, {
name: "Nini",
age: 22,
sex: "Female",
addr:"北京"
}, {
name: "Mary",
age: 16,
sex: "Male",
addr:"上海"
}]
}
})
</script>