脚本宝典收集整理的这篇文章主要介绍了Vue2.0 v-for filter，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue2.0 v-for filter列表过滤功能

习惯使用angularjs的一定知道angularjs有一个ng-repeat filter的例子，可以很简单的过滤一个循环列表。而在使用VUE2.0的时候发现不能在v-for中使用filter功能。所以这里就来讨论一下如何实现这个列表过滤功能。

解决思路使用计算属性

使用计算属性
app.js

var app5 = new Vue({
    el: '#app5',
    data: {
        shoppingList: [
            "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
        ],
        key: ""
    },
    computed: {
        filterShoppingList: function () {
            // `this` points to the vm instance
            var key = this.key;
            var shoppingList = this.shoppingList;
            return shoppingList.filter(function (item) {
                return item.toLowerCase().indexOf(key.toLowerCase()) != -1
            });;
        }
    }
})

app.html