vuejs的动态过滤
Posted winters1992
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs的动态过滤相关的知识，希望对你有一定的参考价值。
想要通过vuejs动态过滤（这里动态指得是过滤的条件是动态变化的），
一直没找到好办法，
最蠢的办法当然是两个两个数组，一个作为原始副本数组 一个作为视图数组，这样当过滤条件变化的时候
动态拷贝原始数组过滤后的结果 到视图数组，这样就能够使得vuejs感知 我们的视图数组变化，然后来更新视图
这种办法很蠢，而且拷贝很浪费时间，下面上代码
<html> <head> <script src="http://cdn.bootcss.com/vue/2.1.4/vue.js"></script> </head> <body> <div id="app"> <!--<li v-for="n in even(persons)">{{ n.name }}</li>--> <li v-for="n in personsView">{{ n.name }} :: {{n.age}}</li> <input type="text" v-model="age" placeholder="age" /> </div> </body> <script type="text/javascript"> var app = new Vue({ el: ‘#app‘, data: { age:0, persons :[{ name: ‘张三‘, age: 30 }, { name: ‘李四‘, age: 40 }, { name: ‘王五‘, age: 10 }], personsView:[{ name: ‘张三‘, age: 30 }, { name: ‘李四‘, age: 40 }, { name: ‘王五‘, age: 10 }] }, methods: { even: function(persons) { return persons.filter(function(p) { return p.age >= 10; }) } }, watch:{ age:function(val,oldVal){ console.log(‘new: %s, old: %s‘, val, oldVal); console.log(this.persons.filter(function(p) { return p.age >= val; }).slice()); this.personsView = this.persons.filter(function(p){ return p.age >= val; }).slice(); } } }); </script> </html>
谁有更好的实现办法 一定要告诉我
以上是关于vuejs的动态过滤的主要内容，如果未能解决你的问题，请参考以下文章