码迷,mamicode.com
首页 > Web开发 > 详细

vuejs的动态过滤

时间:2016-12-04 17:32:23      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:methods   eth   script   数组   code   var   return   lte   this   

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

标签:methods   eth   script   数组   code   var   return   lte   this   

原文地址:http://www.cnblogs.com/winters1992/p/6131006.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!