vue 使用v-for进行循环
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>vue中使用v-for</title>
</head> <body>
<div id="app">
<h3>循环列表</h3>
<table>
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books" :key="book.title">
<td>{{index+1}}</td>
<td>{{book.title}}</td>
<td>{{book.author}}</td>
</tr>
</tbody>
</table>
</div>
<div id="app2">
<h3>循环对象</h3>
<div v-for="(value,key) in person">
{{key}}:{{value}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
books: [{
title: '水浒传',
author: '施耐庵',
},
{
title: '三国演义',
author: '罗贯中',
},
{
title: '西游记',
author: '吴承恩',
},
{
title: '红楼梦',
author: '曹雪芹',
},
]
}
})
</script>
<script>
new Vue({
el: '#app2',
data: {
person: {
name: 'Xsan',
age: 26,
}
}
})
</script>
</body> </html>
"(book,index) in books"是循环表达式，式中的“(book,index)”不可调换位置，对象，第二个才是索引，且索引是从0开始的，所以在下面写序号时，才会是“+1” 第一个永远为对象。
循环状态保持。默认情况下，如果数组中的顺序发生变化，或者个数发生变化导致重新渲染，那么vue会重新利用之前的元素，而不会重新排序，这样在某些情况下可能是想要的，但是绝大部分情况可能不是我们想要的，这时候可以添加key属性。可以只能够是number和str类型，那么在循环时一般使用循环出来的对象的某个唯一值，不要使用index来做key，这样虽然用了，但是没有效果。在vue2.2.x以上，在自定义组件上使用v-for，key是必须要写的。
vue 使用v-for进行循环的更多相关文章
- Vue小练习（for循环，push方法，冒泡，if判断（以及与for循环的连用），按钮高亮，根据input框筛选数据）
vue练习 ''' 1. 先有一下成绩单数据 scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom' ...
- vue.js之生命周期，防止闪烁，计算属性的使用，vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- 关于Vue的两层for循环
vue的核心功能是for循环,双层for循环的场景也是比较常见. <script type="text/javascript"> var vm = new Vue({ ...
- vue里面的v-for列表循环
列表渲染 v-for v-for可以把数据中的一个数组对应为一组元素v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...
- Vue.js：条件与循环
ylbtech-Vue.js:条件与循环 1.返回顶部 1. Vue.js 条件与循环 条件判断 v-if 条件判断使用 v-if 指令: v-if 指令 在元素 和 template 中使用 v-i ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- Vue作用域插槽：用作循环结构的模版
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...
- vue.js_04_vue.js的for循环，if判断和show显示
1.for循环 <body> <div id="app"> <p>{{list1[0]}}</p> <hr /> < ...
- vue里不同数据的循环,其中的数组对象
用产品的属性数据说明 页面里显示效果为:要把产品的属性显示到页面上,产品属性为后台自主上传产品的属性,产品的属性不同,所以需要把属性和属性值显示到页面上 产品属性数据为: properties: &q ...
- vue中路由拦截无限循环的情况
router.beforeEach(async (to, from, next) => { if (token) { if (whiteList.indexOf(to.path) != -1) ...
随机推荐
- (转) XSS Attacks – Exploiting XSS Filter
中文翻译: from wooyun'drops 0x00 前言 这又是一篇来自全职赏金猎人Masato kinugawa的神作.一次双杀,用一篇报告拿下了两个CVE,分别是CVE-2015-6144和 ...
- 投入OJ的怀抱~~~~~~~~~~
OpenJudge C20182024 信箱(1) 账号 修改设定 退出小组 管理员 frank 林舒 Dzx someone 李文新 公告 11-05 程序设计与算法(大学先修课) 成员(61910 ...
- Commvault Oracle备份常用命令
在进行Oracle数据库备份的配置.发起和恢复的过程中,需要用到许多Oracle数据库本身的命令.在此章节中进行命令的梳理,供大家参考. Oracle用户和实例相关命令 Linux/Unix平台 # ...
- 利用在线绘制3d几何图形工具分析投影变化
业余写了个在线绘制几何图形工具,工具链接如下: https://tinygltf.xyz/drawgeometry/ 通过脚本代码在可视化窗口添加对应的点,线段,成像平面推到投影后坐标的计算: 点A通 ...
- 浅谈openresty
浅谈openresty 为什么会有OpenResty? 我们都知道Nginx有很多的特性和好处,但是在Nginx上开发成了一个难题,Nginx模块需要用C开发,而且必须符合一系列复杂的规则,最重要的用 ...
- 2020年薪30W的Java程序员都要求熟悉JVM与性能调优！
前言 作为Java程序员,你有没有被JVM伤害过?面试的时候是否碰到过对JVM的灵魂拷问? 一.JVM 内存区域划分 1.程序计数器(线程私有) 程序计数器(Program Counter Reg ...
- 命令行下使用RAR和7-Zip压缩数据
3.6.1 RAR Winrar的命令行模式程序在安装目录下的 rar.exe (打包压缩程序),unrar.exe(解压缩程序) WinRAR的常用参数如下: -a 添加文件到压缩文件 -k 锁定压 ...
- 深入了解 Java 中的异常处理 + 面试题
# 深入了解 Java 中的异常处理 + 面试题 在程序开发中,异常处理也是我们经常使用到的模块,只是平常很少去深究异常模块的一些知识点.比如,try-catch 处理要遵循的原则是什么,finall ...
- 对result文件进行数据清洗以及进行可视化
项目源码地址:https://github.com/gayu121/result(项目里操作的数据都是清洗过后的数据) 测试要求: 1. 数据清洗:按照进行数据清洗,并将清洗后的数据导入hive数据库 ...
- 暑假第五周总结（学习HBASE相关知识）
本周主要对HBASE的相关知识进行了学习,主要是通过视频的讲解了解到了HBASE的存储机制,HBASE的机制与普通的关系型数据库完全不同,HBASE以列进行存储,其主要执行的就是增删查操作,其更改主要 ...