动态过滤 vuejs 渲染数组，请问如何实现，

2016-12-04 16:32:45 +08:00
 q397064399
<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>

请问有没有更好的办法

2299 次点击
所在节点    Vue.js
2 条回复
LancerComet
2016-12-05 00:07:14 +08:00
```
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<div id="app">
<li v-for="n in filteredList">{{ n.name }} :: {{n.age}}</li>
<input type="text" v-model="age" placeholder="age" />
</div>

<script src="http://cdn.bootcss.com/vue/2.1.4/vue.js"></script>

<script type="text/javascript">
var app = new Vue({
el: '#app',

data: {
age:0,

persons :[{
name: '张三',
age: 30
}, {
name: '李四',
age: 40
}, {
name: '王五',
age: 10
}]
},

computed: {
filteredList () {
return this.persons.filter(item => item.age >= this.age)
}
}
})
</script>

</body>

</html>

```
q397064399
2016-12-05 05:59:45 +08:00
@LancerComet 多谢，我就说我为什么 ES5 通过 computed 方法总是写得通过不了
原来是 this 出错了，
```
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<div id="app">
<li v-for="n in filteredList">{{ n.name }} :: {{n.age}}</li>
<input type="text" v-model="age" placeholder="age" />
</div>

<script src="http://cdn.bootcss.com/vue/2.1.4/vue.js"></script>

<script type="text/javascript">
var app = new Vue({
el: '#app',

data: {
age:0,

persons :[{
name: '张三',
age: 30
}, {
name: '李四',
age: 40
}, {
name: '王五',
age: 10
}]
},

computed: {
filteredList:function() {
var _this = this;
return this.persons.filter(function(item){
console.log(this,_this);
// 为后来的人做一个说明，这里用 babel 自动转成 ES5 了，这里 this 指向 window 对象
//_this 才是指向 vue 对象，
//万恶的原型继承 以及 函数对象，真 TM 恶心人啊
return item.age >= _this.age
});
}
}
})
</script>

</body>

</html>
```

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/325198

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX