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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
Document对象内容集合(比较全)
Sep 06 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
Jul 11 Javascript
在ASP.NET中使用JavaScript脚本的方法
Nov 12 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
Nov 19 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
vue自定义filters过滤器
Apr 26 Javascript
Vue实现多标签选择器
Nov 28 Javascript
详解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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP字符串处理的10个简单方法
2010/06/30 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
pandas 空数据处理方法详解
2019/11/02 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
python 6种方法实现单例模式
2020/12/15 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
校长岗位职责
2013/11/26 职场文书
中层干部岗位职责
2013/12/18 职场文书
交通安全责任书范本
2014/07/24 职场文书
单位员工收入证明样本
2014/10/09 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
python如何做代码性能分析
2021/04/26 Python
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS