VUE中的无限循环代码解析


Posted in Javascript onSeptember 22, 2017

代码如下所示:

<template>
<div id="">
 <ul v-for="(item,index) in listaaa">
  <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li>
 </ul>
</div>
</template>
<script>
export default {
 name: "",
 data(){
   return {
     listaaa: [{
       cdate: '123'
      },
      {
       cdate: '456'
      },
     ],
     flagName: ''
   }
 },
 methods: {
  dealFun(arg, index) {
   console.log('---------------------------')
   if (arg == this.flagName) {
    return false
   } else {
    this.flagName = arg
    return true
   }
  }
 },
}
</script>
<style scoped>
</style>

VUE中的无限循环代码解析

导致无限循环的原因:flagName改变导致视图更新,视图更新又导致 dealFun()函数不停执行,进而flagName再次更新;循环往复;

解决办法:(使用全局变量)

<template>
<div id="">
 <ul v-for="(item,index) in listaaa">
  <li v-if='dealFun(item.cdate,index)'>{{item.cdate}}</li>
 </ul>
</div>
</template>
<script>
var flagName;
export default {
 name: "",
 data(){
   return {
     listaaa: [{
       cdate: '123'
      },
      {
       cdate: '456'
      },
     ],
    //  flagName: ''
   }
 },
 methods: {
  dealFun(arg, index) {
   console.log('---------------------------')
   if (arg == flagName) {
    return false
   } else {
    flagName = arg
    return true
   }
  }
 },
}
</script>
<style scoped>
</style>

总结

以上所述是小编给大家介绍的VUE中的无限循环代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
javascript的BOM
May 03 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
vue组件实例解析
Jan 10 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
详解vue中引入stylus及报错解决方法
Sep 22 #Javascript
EL表达式截取字符串的函数说明
Sep 22 #Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 #Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 #Javascript
ES6中新增的Object.assign()方法详解
Sep 22 #Javascript
Vee-Validate的使用方法详解
Sep 22 #Javascript
Js中async/await的执行顺序详解
Sep 22 #Javascript
You might like
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php面向对象全攻略 (四)构造方法与析构方法
2009/09/30 PHP
PHP基本语法实例总结
2016/09/09 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
js获取域名的方法
2015/01/27 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
Bootstrap开发实战之响应式轮播图
2016/06/02 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
NestJs 静态目录配置详解
2019/03/12 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
JS实现瀑布流效果
2020/03/07 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python中fnmatch模块的使用详情
2018/11/30 Python
python面向对象实现名片管理系统文件版
2019/04/26 Python
Python文件路径名的操作方法
2019/10/30 Python
python中return如何写
2020/06/18 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
《风筝》教学反思
2014/04/10 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
团委竞选演讲稿
2014/04/24 职场文书
教师纪念9.18事件演讲稿范文
2014/09/14 职场文书
维稳工作承诺书
2015/01/20 职场文书
入学证明
2015/06/23 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python