Vue.js学习系列（二十六）-- 循环语句（二）
来源：互联网 发布：在线办公软件qq 编辑：程序博客网 时间：2024/05/16 09:47
2.遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr>
<td v-for="value in person">
{{value}}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
person:{
name:"李明",
age:24,
address:"上海"
}
}
})
</script>
</body>
</html>
运行结果:
通过v-for将person对象的元素显示在表格中。
2.1 两个参数遍历对象
在遍历也可以提2个的参数分别表示键和值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td v-for="(value,key) in person">
{{ key }}
</td>
</tr>
<tr>
<td v-for="(value,key) in person">
{{value}}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
person:{
name:"李明",
age:24,
address:"上海"
}
}
})
</script>
</body>
</html>
运行结果如下：
2.2 三个参数遍历对象
提供三个参数遍历对象，这三个参数分别是：索引、键、值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="src/vue.min.js"></script>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td v-for="(value,key,index) in person">
{{ index }}
</td>
</tr>
<tr>
<td v-for="(value,key,index) in person">
{{ key }}
</td>
</tr>
<tr>
<td v-for="(value,key,index) in person">
{{value}}
</td>
</tr>
</table>
</div>
<script type="text/javascript">
new Vue({
el:"#app",
data:{
person:{
name:"李明",
age:24,
address:"上海"
}
}
})
</script>
</body>
</html>
运行结果
- Vue.js学习系列（二十六）-- 循环语句（二）
- Vue.js学习系列（二十五）-- 循环语句（一）
- Vue。js学习系列（二十四）--条件语句（二）
- Vue.js 学习（二）
- vue.js学习（二）
- Vue.js学习系列（十九）--常用指令（二）
- Vue.js学习系列（四十一）-- 修饰符（二）
- Vue.js学习系列（二）---配置开发环境
- Vue.js学习系列（二十一）--修饰符
- Vue.js学习系列（二十二）--过滤器
- Vue---条件语句和循环语句（二）
- Vue.js学习系列（三十一）-- Vue.js样式绑定（二）
- Vue.js学习系列（三十八）-- Vue.js表单 （二）
- Vue.js学习系列（二十八）-- 计算属性（二）
- Vue.js学习笔记（二）
- Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）
- Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）
- Vue.js学习系列二 —— vuex学习实践笔记（附DEMO）
- Android ConstraintLayout 个人使用感受
- 《Spring设计思想》AOP实现原理（基于JDK和基于CGLIB）
- 读取Unicode格式TXT文件问题
- echart同一个页面，多个图表宽高自适应
- log4j的用法
- Vue.js学习系列（二十六）-- 循环语句（二）
- [安全] DMZ 介绍
- Spring 学习笔记（一）
- 算法--选择排序
- QQ 为什么以 UDP 协议为主，以 TCP 协议为辅？
- L2-002. 链表去重 (模拟+空间换时间)
- Java的四种引用
- CI框架的查询数据封装的方法
- oj_469 flappy bird
