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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
JavaScript鼠标悬停事件用法解析
May 15 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php模板中出现空行解决方法
2011/03/08 PHP
PHP和.net中des加解密的实现方法
2013/02/27 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
js常见表单应用技巧
2008/01/09 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
JavaScript如何操作css
2020/10/24 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
Python3访问并下载网页内容的方法
2015/07/28 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
详解Python用户登录接口的方法
2019/04/17 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
技校个人求职信范文
2014/01/25 职场文书
幼儿园大班毕业教师寄语
2014/04/03 职场文书
社会实践活动总结报告
2014/04/29 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
教育教学读书笔记
2015/07/02 职场文书
vue postcss-px2rem 自适应布局
2022/05/15 Vue.js