问题

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. DDOS学习笔记(《破坏之王-DDOS攻击与防范深度剖析》)

           最近花了点时间把<破坏之王-DDOS攻击与防范深度剖析>看了一遍,坦白来说,这本书比较浅显,可以说是入门书,当然对于我这种对DDOS一知半解的人来说,也是一本不错的书,起码我 ...

  2. windos10安装mongodb并配置

    想了想还是把这个写上吧,毕竟网上的教程有不少坑的. 首先下载mongodb,如果你嫌官网慢,那么你可以去我的百度云下载 链接:http://pan.baidu.com/s/1pKEWTBX 密码:v3 ...

  3. java I/O---复制文本文件

    利用FileInputStream 和FileOutputStream 复制文本 1 public class CopyTextByBuffer { 2 3 /** 4 * @param args 5 ...

  4. MySQL 使用经验

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/10 在索引中完成排序 SELECT thread_id FROM ...

  5. [Find the last digit when factorial of A divides factorial of B]

    Given two numbers A and B. The task is to compute the last digit of the resulting F, where F= B! / A ...

  6. RabbitMQ之消费者Demo(队列参数详细说明)

    package com.jiefupay; import java.io.IOException; import java.util.HashMap; import java.util.Map; 8 ...

  7. java之自动过滤提交文本中的html代码script代码

    public class test { public static String Html2Text(String inputString) { String htmlStr = inputStrin ...

  8. Oracle 用户操作表权限

    grant select any table to xxx 将使得xxx用户能够查看到所有用户的表:正确的授权不能是这样: 用户是隔离表的schema,授权时..

  9. FPGA 设计总结(1)

    1. set_input_delay和set_output_delay的选项-max和-min的理解 首先 input/output其实是模拟数据在端口外的延时,是一个外部约束条件,目的是为了约束FP ...

  10. 讲述Sagit.Framework解决:双向引用导致的IOS内存泄漏(上)

    前言: 好久没写文章了,最近先是重构IT恋.又重写IT恋中. Sagit框架也不断的更新,调整,现在感觉已完美了了相当的多. 今天不写教程,先简单分享一下技术内容. 1:见Block必有:#defin ...