Vue filter-v-for 使用

        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.trim().toLowerCase()) != -1
                    //toLowerCase方法用于把字符串转换为小写。
                });;
            }
        }
    });

    <div class="app5">
        <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>    

    </div>