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开发技术大全-第3章 js数据类型
Jul 03 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
js中文逗号转英文实现
Feb 11 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
JavaScript面向对象精要(下部)
Sep 12 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 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中删除变量时unset()和null的区别分析
2011/01/27 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
php生成mysql的数据字典
2016/07/07 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
js的一些常用方法小结
2011/06/29 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
python实现查询IP地址所在地
2015/03/29 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
2019/01/17 HTML / CSS
.NET现在共支持多少种语言
2014/02/26 面试题
25道Java面试题集合
2013/05/21 面试题
会计岗位职责范本
2014/03/07 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
家长学校工作方案
2014/05/07 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
2014年纠风工作总结
2014/12/08 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang