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游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
jQuery插件开发汇总
May 15 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
Javascript call及apply应用场景及实例
Aug 26 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
Thinkphp中的curd应用实用要点
2015/01/04 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
2016/08/19 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
Nodejs环境实现socket通信过程解析
2020/07/03 NodeJs
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
pandas object格式转float64格式的方法
2018/04/10 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python版本五子棋的实现代码
2018/12/11 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
django-filter和普通查询的例子
2019/08/12 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
食品厂厂长岗位职责
2014/01/30 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle