目录
1. v-for遍历普通数组
语法 : v-for="(item,index) in array"
item : 数组中的每一项
index : 索引值
如果只需要第一个参数item ,index可以不写,括号可以省略
<body>
<div id="app">
<ul>
<!-- in前边只写一个变量,变量中保存的是数据-->
<!-- <li style="color:red" v-for="item in array">{{item}}</li>-->
<!-- in前边写2个变量,第一个变量中保存的是数据,第二个变量中保存的是下标-->
<li style="color:red" v-for="(item,index) in array">{{item}} -- {{index}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
array:['吃饭','睡觉','敲代码']
}
})
</script>
</body>
2.v-for遍历对象数组
语法 : v-for="(item,index) in array"
item : 数组中的每一项(每一个对象)
index : 索引值
如果只需要第一个参数item ,index可以不写,括号可以省略
<body>
<div id="app">
<table>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in array">
<td><input type="checkbox"></td>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#app',
data:{
array:[
{
name:'小红',
age:21,
sex:'女'
},
{
name:'小黄',
age:21,
sex:'男'
},
{
name:'小蓝',
age:21,
sex:'男'
}
]
}
})
</script>
</body>
3.v-for遍历对象
语法 : v-for="(value,key,index) in obj"
value: 属性值
key : 属性
index : 索引值
如果只需要第一个参数value,那么key 和index可以不写,括号可以省略
<body>
<div id="app">
<ul>
<!-- in前边只写一个变量,变量中保存的是属性值-->
<!-- <li v-for="o1 in obj">{{o1}}</li>-->
<!-- in前边写2个变量,第一个变量中保存的是属性值,第二个变量中保存的是属性名-->
<!-- <li v-for="(o1,o2) in obj">{{o1}}--{{o2}}</li>-->
<!-- in前边写2个变量,第一个变量中保存的是属性值,第二个变量中保存的是属性名,第三个变量中保存的是下标-->
<li v-for="(o1,o2,o3) in obj">{{o1}}--{{o2}}--{{o3}}</li>
</ul>
</div>
<script>
new Vue({
el:'#app',
data:{
obj:
{
name:'小红',
age:21,
sex:'女'
}
}
})
</script>
</body>
注意 : 永远不要把v-if 和 v-for 同时用在一个元素上,因为v-for的优先级高于v-if,当v-if去判断条件时,v-for已经遍历结束
如果,我们确实需要判断条件再渲染,那么,可以先把数据处理好,再遍历处理好的数据(计算属性,以后讲解),或者在遍历元素的父元素上进行判断
下面,我们用第二种方法实现数据的判断与渲染
<body>
<div id="app">
<h1>人员信息表</h1>
<table border="1px solid #333" >
<thead>
<tr>
<th><input type="checkbox"></th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody v-if="bool">
<tr v-for="(item,index) in obj.result">
<td><input type="checkbox"></td>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>
<button>编辑</button>
<button>删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
bool:'obj.code===200',
obj:{
code: 200,
message: '响应成功',
result: [
{
name: '小红',
age: 21,
sex: '女'
},
{
name: '小黄',
age: 21,
sex: '男'
},
{
name: '小蓝',
age: 21,
sex: '男'
}
]
}
}
})
</script>
</body>