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初学困境—js初学
Dec 29 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
Vue实现多标签选择器
Nov 28 Javascript
微信小程序激励式视频广告组件使用详解
Dec 06 Javascript
原生JS实现音乐播放器
Jan 26 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
PHP使用者状态管理功能的应用
2006/10/09 PHP
十天学会php之第八天
2006/10/09 PHP
PHP中的按位与和按位或操作示例
2014/01/27 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
js操作label给label赋值及取label的值示例
2013/11/07 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
2014/01/06 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
利用Python将数值型特征进行离散化操作的方法
2018/11/06 Python
Python实现分数序列求和
2020/02/25 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
护理专业的自荐信
2013/10/22 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
新春寄语大全
2014/04/09 职场文书
罚站检讨书
2015/01/29 职场文书
泰山导游词
2015/02/02 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
比赛主持人开场白
2015/05/29 职场文书
长江七号观后感
2015/06/11 职场文书
培训班开班主持词
2015/07/02 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python