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 相关文章推荐
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
JavaScript While 循环基础教程
Apr 05 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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令牌 Token改进版
2008/07/18 PHP
通过5个php实例细致说明传值与传引用的区别
2012/08/08 PHP
ThinkPHP视图查询详解
2014/06/30 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
javascript 闭包详解
2015/02/15 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
ES6中字符串string常用的新增方法小结
2017/11/07 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
2018/10/26 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
Python Queue模块详解
2014/11/30 Python
Python解析xml中dom元素的方法
2015/03/12 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
python实现AES加密与解密
2019/03/28 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
追悼会子女答谢词
2014/01/28 职场文书
关于安全的演讲稿
2014/05/09 职场文书
营销总监岗位职责
2014/09/16 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
团员自我评价范文
2015/03/10 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript