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 学习笔记(十二) dom
Jan 21 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
JavaScript函数内部属性和函数方法实例详解
Mar 17 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
使用TS来编写express服务器的方法步骤
Oct 29 Javascript
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
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实现的英文名字全拼随机排号脚本
2014/07/04 PHP
PHP实现过滤掉非汉字字符只保留中文字符
2015/06/04 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
2011/09/10 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JavaScript版的TwoQueues缓存模型
2014/12/29 Javascript
使用js画图之画切线
2015/01/12 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
Vue.js实现大屏数字滚动翻转效果
2019/11/29 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
Python引用(import)文件夹下的py文件的方法
2014/08/26 Python
Python的标准模块包json详解
2017/03/13 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
python怎么自定义捕获错误
2020/06/29 Python
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
2015年校长新年寄语
2014/12/08 职场文书
企业文化学习心得体会
2016/01/21 职场文书
css中有哪些方式可以隐藏页面元素及区别
2022/06/16 HTML / CSS