vuejs的动态过滤

最新推荐文章于 2023-05-27 19:03:34 发布

weixin_30892987

最新推荐文章于 2023-05-27 19:03:34 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/winters1992/p/6131006.html

版权

想要通过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>

谁有更好的实现办法一定要告诉我

转载于:https://www.cnblogs.com/winters1992/p/6131006.html

weixin_30892987

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vuejs的动态过滤

想要通过vuejs动态过滤（这里动态指得是过滤的条件是动态变化的），一直没找到好办法，最蠢的办法当然是两个两个数组，一个作为原始副本数组一个作为视图数组，这样当过滤条件变化的时候动态拷贝原始数组过滤后的结果到视图数组，这样就能够使得vuejs感知我们的视图数组变化，然后来更新视图这种办法很蠢，而且拷贝很浪费时间，下面上代码<html><hea...
复制链接

扫一扫