vue 使用v-for进行循环的实例代码详解


Posted in Javascript onFebruary 19, 2020

代码如下所示:

<!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进行循环的实例代码详解,希望对大家有所帮助,也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery maxlength文本字数限制插件
Apr 16 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
jquery为页面增加快捷键示例
Jan 31 Javascript
javascript实现时间格式输出FormatDate函数
Jan 13 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
JavaScript实现简易聊天对话框(加滚动条)
Feb 10 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 #Javascript
ES6中new Function()语法及应用实例分析
Feb 19 #Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 #Javascript
JS继承定义与使用方法简单示例
Feb 19 #Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 #Javascript
vue中实现回车键登录功能
Feb 19 #Javascript
Vue中实现回车键切换焦点的方法
Feb 19 #Javascript
You might like
PHP ajax 分页类代码
2008/11/13 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
Jquery chosen动态设置值实例介绍
2013/08/08 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
详解JavaScript中localStorage使用要点
2016/01/13 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
js canvas画布实现高斯模糊效果
2018/11/27 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
js利用iframe实现选项卡效果
2020/08/09 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
python如何提升爬虫效率
2020/09/27 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
化工专业应届生求职信
2013/11/08 职场文书
旅游安全协议书
2014/04/21 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
欢迎家长标语
2014/10/08 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
Nginx下配置Https证书详细过程
2021/04/01 Servers