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去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
Dec 19 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
JS小数运算出现多为小数问题的解决方法
Jun 02 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 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
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
13 个JavaScript 性能提升技巧分享
2012/07/26 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
如何在JavaScript中使用localStorage详情
2021/02/04 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
Python读取一个目录下所有目录和文件的方法
2016/07/15 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
selenium+python环境配置教程详解
2019/05/28 Python
python pandas写入excel文件的方法示例
2019/06/25 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
基于YUV 数据格式详解及python实现方式
2019/12/09 Python
基于python代码批量处理图片resize
2020/06/04 Python
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
《歌唱二小放牛郎》教学反思
2014/04/19 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
《刷子李》教学反思
2016/02/20 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技