vue 对 v-for 中数组进行过滤操作

之前写angularjs的时候,filter是可以直接在ng-repeat中使用。但是到了vue好像这个不起作用。

具体解决办法:

加一个计算属性:

        computed:{
            filterData: function () {
                console.log(JSON.parse(JSON.stringify(this.data)));
                return JSON.parse(JSON.stringify(this.data));
            }
        }

然后template中直接引用filterData就可以了,所有过滤的操作可以直接写在filterData属性的后面那个function中。

使用:

<Row  v-for="(item, index) in filterData"> </Row>

注: filterData不能在data中定义,这是一个计算属性,否则会报错。

原文地址:https://www.cnblogs.com/chenmz1995/p/11220767.html

时间: 2024-08-30 05:11:34

vue 对 v-for 中数组进行过滤操作的相关文章

js中数组Array的操作

JS中数组有很多操作,作为前端多多少少知道点,但每次要用时都需要去百度,有点麻烦,所以在这儿做个备忘,简单总结些平时最常用的数组操作. shift:删除原数组第一项,并返回删除元素的值: var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 注:如果数组为空则返回undefined unshift:将参数添加到原数组开头,并返回数组的长度 var a = [1,2,3,4,5]; var b = a.unshift(-2,-1); /

关于JS中数组的分析操作

JS数组的基础操作代码: <script type="text/javascript">        数组的三种定义    var arr1 = new Array();     var arr3 = Array(1,2,3.5,4,'5',false);     var arr2 = [1,2,3,4,'5',"aa",true];         var i;     var arr4 = [];    arr4[3] = 12;     arr4

VUE关于data对象中数组修改和对象添加属性的响应式问题

数组: 根据VUE官网: 数组修改: 修改数组某个元素的值: Vue.set(this.items, indexOfItem, newValue): this.$set(this.items, indexOfItem, newValue); this.items.splice(indexOfItem, 1, newValue);   修改数组的长度:vm.items.splice(newLength): 对象: 给数组新添加响应式属性: Vue.set(vm.userProfile, 'age'

linux下拷贝命令中的文件过滤操作记录

在日常的运维工作中,经常会涉及到在拷贝某个目录时要排查其中的某些文件.废话不多说,下面对这一需求的操作做一记录: linux系统中,假设要想将目录A中的文件复制到目录B中,并且复制时过滤掉源目录A中的文件a和b做法如下:#cd A#cp -r `ls |grep -v a |grep -v b| xargs` B注意:1)上面在cp命令执行前,最好提前cd切换到源目录A下,不然就要在ls后跟全路径,否则就会报错.2)命中中的xargs参数加不加效果都一样,不过最好是加上,表示前面的命令输出3)g

javascipt中数组的常见操作

1.与lua不同,即使数组中间有null或者undefined,仍然能求出正确的长度 2.length 改变.length也会改变数组的大小 3. indexOf arr.indexOf(a)会返回第一个a的下表,如果没有,返回-1 4.slice()参数包括开始索引,不包括结束索引.左闭右开 如果不给slice()传递任何参数,它就会从头到尾截取所有元素.利用这一点,我们可以很容易地复制一个Array: 5.push() pop() push()向Array的末尾添加若干元素,pop()则把A

php中利用array_filter过滤数组为空值

[导读] 在我们开发过程中,判断数组为空时你会想到什么方法呢?首先想到的应该是empty函数,不过直接用empty函数判断为空是不对的,因为当这个值是多维数的时候,empty结果是有值的.其实我们可以利用array_filter函数 在我们开发过程中,判断数组为空时你会想到什么方法呢?首先想到的应该是empty函数,不过直接用empty函数判断为空是不对的,因为当这个值是多维数的时候,empty结果是有值的. 其实我们可以利用array_filter函数轻松去掉多维空值,而数组的下标没有改变,下

JavaScript中数组对象详解

Array对象即数组对象用于在单个变量中存储多个值,JS的数组是弱类型的,所以允许数组中含有不同类型的元素,数组元素甚至可以是对象或者其他数组. 创建数组的语法 1.Array构造器 1.var list=new Array(); 2.var list=new Array(size); 3.var list=new Array(element0,element1,...elementn); 2.字面量的方式 var Array[element0,element1,...elementn]; 举例

PHP 中数组获取不到元素

早上看到 SO 上一个有关 PHP 的问题,提问者描述有一个数组,使用 print_r 可以看到索引 key 和相对应的 value 都是存在的,但是访问该元素,不管是使用 array[key] 还是 array['key'] 这两种访问形式,都提示 Undefined offset 而取不到数据.举例描述提问者的问题,假设一个数组 $a,print_r($a) 的输出为 可以看到数组存在索引 1 值为 foo,当使用 $a[1] 或者 $a['1'] 访问索引为 1 的元素,都提示 Undef

js中数组的方法

数组在笔试中经常会出现的面试题,javascript中的数组与其他语言中的数组有些不同,为了方便之后数组的方法学习,下面小编给大家整理了关于数组的操作方法,一起看看吧. 数组创建: 1.JavaScript中创建数组有两种方式,第一种是使用 Array 构造函数: var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily", "l