一、什么的v-for:
v-for就是循环遍历数据
二、v-for的使用
1.遍历普通数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>
<!-- 创建容器-->
<div id="arr">
<!-- 遍历普通数组-->
<ul>
<!-- 如果就一个变量,那么显示的是这个数组的数据-->
<!-- <li v-for="item in array">姓名:{{item}}</li>-->
<!-- 如果是二个变量,那么第一个变量是数组的数据,第二个变量的数组的下标-->
<li v-for="(item,index) in array">姓名:{{item}} ---- 序号:{{index}}</li>
</ul>
</div>
</body>
</html>
<script>
new Vue({
el: "#arr",
data: {
array: ['姜泥', '徐凤年', '陈芝豹']
}
});
</script>
2.遍历对象数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>
<!-- 创建容器-->
<div id="arr">
<!-- 遍历对象数组-->
<table cellpadding="0" cellspacing="0" border="2px solid blick" width="500px">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody style="text-align: center">
<!-- 当只有一个变量的时候,那么这个变量是一个对象 -->
<!-- <tr v-for="item in obj">-->
<!-- <td>{{item}}</td>-->
<!-- </tr>-->
<!-- 当有而个变量的时候,那么这个变量是一个对象,第二个变量是下标 -->
<tr v-for="(item,index) in obj">
<td><input type="checkbox"></td>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.sex}}</td>
<td>{{item.address}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
new Vue({
el: "#arr",
data: {
obj: [{
name: '姜泥',
age: 22,
sex: '女',
address: '西楚'
}, {
name: '徐凤年',
age: 24,
sex: '男',
address: '北凉'
}, {
name: '洪洗象',
age: 24,
sex: '男',
address: '武当'
}]
}
});
</script>
3.遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门程序</title>
</head>
<body>
<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>
<!-- 创建容器-->
<div id="arr">
<!-- 遍历对象-->
<ul v-if="obj.code == 101">
<!-- 当只有一个变量的时候,获取的是对象的属性值-->
<!-- <li v-for="item in obj">{{item}}</li>-->
<!-- 当有二个变量的时候,第一个变量获取的是对象的属性值,第二个变量是属性名-->
<!-- <li v-for="(obj1,obj2) in obj">{{obj1}},{{obj2}}</li>-->
<!--当有三个变量的时候,第一个变量获取的是对象的属性值,第二个变量是属性名,第三个变量是小标-->
<li v-for="(obj1,obj2,obj3) in obj">{{obj1}},{{obj2}},{{obj3}}</li>
</ul>
<ul v-else>请求失败</ul>
</div>
</body>
</html>
<script>
new Vue({
el: "#arr",
data: {
obj: {
code: 101,
message: "查询成功",
data: "我是数据"
}
}
});
</script>
当code的值为101的时候,会渲染数据,当code的值不为101时,则会渲染请求失败,可以自行尝试一下。
三、v-if和v-for不能同时出现在同一个标签里面
在我遍历对象的时候,在容器里面有一个ul,上面加了一个v-if的判断,为什么我不想之前的写法一样,for循环里面嵌套if判断呢?
因为,在Vue里面,v-for的优先级比v-if高,如果v-for嵌套v-if后,v-for会先循环遍历所以的数据,然后才会继续v-if的判断,这样的写法,会导致很多不必要的判断,增加系统的压力。
而,如果把v-if移至v-for前面的话,那么就只会判断一次是否正确,从而在v-for里面就不会去遍历错误的信息,间接的减少了运行的压力,使得可以更好地渲染和维护