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的动态过滤

最新文章

热门文章