首页 > 代码库 > vuejs的动态过滤

vuejs的动态过滤

2024-08-25 04:32:02   216人阅读

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


联系
我们