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

<div id="app5">
        <h2>Vue-for</h2>
        <ul>
            <li v-for="item in shoppingList">
                {{ item }}
            </li>
        </ul>
        <h2>Vue-for filter實現</h2>
        <ul>
            Filter Key<input type="text" v-model="key">   
            <li v-for="item in filterShoppingList">
                {{ item }}
            </li>
        </ul>        
    </div>

最終效果實現了根據關鍵字來過濾列表的功能。