Vue中v-for循环
v-for循环遍历数据永远不要把v-if和v-for同时用在同一个元素上。风格指南 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%
v-for循环遍历数据
永远不要把
v-if
和v-for
同时用在同一个元素上。
风格指南 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81
1.v-for遍历普通数组
in前面如果是一个变量,那么该变量保存的是数组中的数据in前面如果是两个变量,那么第一个变量保存的是数组中的数据,第二个变量保存的是下标
<div id="app">
<ul>
<!--
in前面如果是一个变量,那么该变量保存的是数组中的数据
<li v-for="item in array">{{item}}</li>
-->
<!--
in前面如果是两个变量,那么第一个变量保存的是数组中的数据,
第二个变量保存的是下标
-->
<li v-for="(item,index) in array">数据:{{item}}>>>下标:{{index}}</li>
<li v-for="item in array">数据:{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#app",
data:{
array:['张三','李四','王五','老六']
}
});
</script>
2.v-for遍历对象数组
如果是一个变量,那么该变量保存的是数据【对象】
<div id="app">
<!--<ul>
如果是一个变量,那么该变量保存的是数据【对象】
<li v-for="item in array">{{typeof item}}</li>
</ul>-->
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox"></th>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家庭住址</th>
<th>操作</th>
</tr>
</thead>
<tbody v-if="code === 200">
<tr v-for="(item,index) in res">
<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>
<td>
<a href="#">编辑</a>
<a href="#">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: "#app",
data: {
code: 200,
msg: '成功',
res: [
{
name: "张三",
age: 21,
sex: "男性",
address: "郑州市中原区"
},
{
name: "李四",
age: 21,
sex: "男性",
address: "郑州市二七区"
},
{
name: "老六",
age: 22,
sex: "男性",
address: "郑州市金水区"
}
]
}
});
</script>
3.v-for遍历对象
如果是一个变量,那么保存的是对象中的属性值
如果是两个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名
如果是三个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名,第三个变量保存的是下标
v-for="o1 in obj" o1:属性值
v-for="(o1,o2) in obj" o1:属性值 o2:属性名
v-for="(o1,o2,o3) in obj" o1:属性值 o2:属性名 o3:下标
<div id="app">
<!--
v-for="o1 in obj" o1:属性值
v-for="(o1,o2) in obj" o1:属性值 o2:属性名
v-for="(o1,o2,o3) in obj" o1:属性值 o2:属性名 o3:下标
-->
<ul>
<!--
如果是一个变量,那么保存的是对象中的属性值
-->
<!-- <li v-for="o1 in obj">{{o1}}</li>-->
<!--
如果是两个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名
-->
<!-- <li v-for="(o1,o2) in obj">{{o1}}>>>{{o2}}</li>-->
<!--
如果是三个变量,那么第一个变量保存的是属性值,第二个变量保存的是属性名,第三个变量保存的是下标
-->
<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: "男性",
address: "郑州市二七区"
}
}
});
</script>
4.v-for循环数字
in后面不仅可以放数组、对象数组、对象,还可以放数字
在in前面用一个变量存储当前次数,注意:此变量是从1开始,而不是从0开始
<div id="app">
<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
<script>
new Vue({
el:'#app'
});
</script>
更多推荐
所有评论(0)