问题

bug: You may have an infinite update loop in a component render function 无限循环

  1. 需要处理的数组(在 ** ssq **里):
bonus_code: ['01', '19', '25', '26', '27', '33', '10']
  1. 计算属性 computed:
ssqRed: function() {
return this.ssq.bonus_code.splice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.splice(6, 7)
}
  1. v-for 代码:
<em class="red-ball tac mr5 fl" v-for="(item, index) in ssqRed">{{ item }}</em>
<em class="blue-ball tac mr5 fl" v-for="(item, index) in ssqBlue">{{ item }}</em>
  1. 最终结果我想把数组前6个数渲染成红色球,最后一个(也就是第7个)渲染成蓝色。

解答

我已经在 SegmentFault上提问,地址:vue计算属性computed同时操作一个数组

我已采纳答案,将代码改成:

ssqRed: function() {
return this.ssq.bonus_code.slice(0, 6)
},
ssqBlue: function() {
return this.ssq.bonus_code.slice(6, 7)
}

问题就在于自己没搞清楚 splice会对原数组造成改变。

在寻找解决方案时,朋友少晖教给我一种更好的解决方式,很感谢

即类名判断

  1. 如果数组大小已知,就做一个类名判断,索引大于多少展示蓝色的类名就行了;
  2. 处理后的 html代码:
<em v-for="(item, index) in ssq.bonus_code" :class="['tac','mr5','fl',index>5?'blue-ball':'red-ball']" >{{ item }}</em>
  1. 增加的代码:
index>5?'blue-ball':'red-ball'

在做vue计算属性,v-for处理数组时遇到的一个bug的更多相关文章

  1. vue计算属性无法监听到数组内部变化

    计算属性可以帮助我们简化代码,做到实时更新,不用再自己添加function去修改data. 首先看一下计算属性的基本写法(摘自官网) var vm = new Vue({ el: '#demo', d ...

  2. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  3. Vue计算属性

    github地址:https://github.com/lily1010/vue_learn/tree/master/lesson06 一 计算属性定位 当一些数据需要根据其它数据变化时,这时候就需要 ...

  4. vue教程2-03 vue计算属性的使用 computed

    vue教程2-03 vue计算属性的使用 computed computed:{ b:function(){ //默认调用get return 值 } } ---------------------- ...

  5. vue 计算属性 实例选项 生命周期

    vue 计算属性: computed:{} 写在new vue()的属性,只要参与运算,数据不发生变化时,次计算只会执行一次,结果缓存,之后的计算会直接从缓存里去结果.如果其中的值发生变化(不管几个) ...

  6. Vue计算属性缓存(computed) vs 方法

    Vue计算属性缓存(computed) vs 方法 实例 <div id="example"> <p>Original message: "{{ ...

  7. vue 计算属性实现过滤关键词

    效果 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  8. Vue 计算属性 && 监视属性

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  9. vue - 计算属性、表单输入绑定

    计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...

随机推荐

  1. 阿里云服务器(windows server2008)下安装SVN----杜恩德

    我想说的是如何在阿里云上建立SVN版本,供外网访问,上传代码 在阿里云服务器上安装svn与在本地安装是一样的, ----参考 http://blog.csdn.net/m0_37027631/arti ...

  2. Python3.5:装饰器的使用

    在Python里面函数也是一个对象,而且函数对象可以被赋值给变量,所以,通过变量也能调用该函数,简单来说函数也是变量也可以作文函数的参数 >>> def funA(): ... pr ...

  3. Java 集成 速卖通开发.

    一.申请成为开发者 申请入口:http://isvhz.aliexpress.com/isv/index.htm 说明文档:http://activities.aliexpress.com/open/ ...

  4. ArcGIS 网络分析[8.5] 资料5 网络分析拓展模块及各种接口说明

    说完了网络数据集如何用AO来创建,接下来就说说如何用另一个类库--NetworkAnalyst来做网络分析. 区别于NetworkAnalysis,这个是几何网络分析用的类库. 本篇先做类库和有关接口 ...

  5. KVM(二):KVM应用

    ++++++++++++++++++++++++++++++创建和拍摄快照++++++++++++++++++++++++++++++++++ KVM快照方法常用的是qemu-img snapshot ...

  6. shader 2 : use shaderToy in unity

    shadertoy 原型,https://www.shadertoy.com/view/XslGRr 先说几个概念 Shader language目前有3种主流语言:基于OpenGL的GLSL(Ope ...

  7. windows 运行banana

    1 git clone 工程 2 安装 npm 3 执行 npm install -g bower

  8. 【转】搭建spark环境 单机版

    本文将介绍Apache Spark 1.6.0在单机的部署,与在集群中部署的步骤基本一致,只是少了一些master和slave文件的配置.直接安装scala与Spark就可以在单机使用,但如果用到hd ...

  9. Building an MFC project for a non-Unicode character set is deprecated

    1>------ 已启动生成: 项目: TestSdk, 配置: Debug Win32 ------1>C:\Program Files (x86)\MSBuild\Microsoft. ...

  10. 如何使用MOQ进行单元测试

    使用MOQ来伪装和隔离被依赖对象,从而提高被测对象的测试效果. 安装 通过http://code.google.com/p/moq可以下载MOQ的最新版本.在SSL项目中,我们使用的是MOQ 3.1. ...