vue.js(8)--v-for的使用
2024-09-06 00:55:01
v-for遍历数组、对象数组、对象、迭代次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-for遍历</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div class="app">
<p v-for="(i,item) in list">******索引值:{{ i }}***值:{{ item }}******</p>
<!-- v-for遍历普通数组 --> <p v-for="(item,i) in arr">id:{{item.id}}********name:{{item.name}}*******索引值:{{i}}</p>
<!-- v-for遍历数组中的对象 --> <p v-for="(val,key,i) in user">val:{{val}}****key:{{key}}******index:{{i}}</p>
<!-- v-for直接遍历对象 --> <p v-for="i in 10">这是第{{i}}次循环</p>
<!-- 遍历迭代次数 -->
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
list:[0,1,2,3,4,5],
arr:[
{'id':1,'name':'齐怪'},
{'id':1,'name':'齐怪'},
{'id':1,'name':'齐怪'},
],
user:{
'id':'1',
'name':'齐怪',
'sex':'boy'
}
}
})
</script>
</body>
</html>
最新文章
- 【Win 10 应用开发】分析 URI 中的查询字符串
- python文件读写操作与linux shell变量命令交互执行
- 配置自己的OpenGL库,glew、freeglut库编译,库冲突解决(附OpenGL Demo程序)
- C# winform控件之listview学习积累
- poj4052
- ios 指南针
- 如何在xcode下面同时安装cocos2d-iphone 和 cocos2d-x模板,其实是因为很喜欢C++的缘故,当时学习的是前者,现在自己摸着石头过河了就(cocos2d-x安装失败 出错)
- JS代码放在head和body中的区别分析
- nagios总结二
- Apache日志分割
- linux(CENTOS)系统各个目录的作用详解
- Glide和Picasso的区别
- springboot-项目获取resources下文件碰到的问题(classPath下找不到文件和文件名乱码)
- Django框架的探索
- JAVA锁机制-可重入锁,可中断锁,公平锁,读写锁,自旋锁,
- C#接口和泛型类
- 使用管道和cronolog切割日志
- poj 2449 Remmarguts&#39; Date 求第k短路 Astar算法
- 解决oninput在输入中文时,会获取拼音的问题
- 奶牛易物-Alpha版本测试报告