Vue2.0實現1.0的搜索過濾器功能

本文轉載自查看原文 2016-11-30 17:37 6034 Vue.js

　　Vue2.0刪除了很多1.0的比較實用的過濾器，如filterBy，orderBy。官方文檔給了通過計算屬性實現1.0搜索過濾器功能，自己又加入了大小寫通用檢索功能，比較簡單，學一下。

<body>
    <div class="app">
        <input type="text" v-model="name">
        <ul>
            <li v-for="user in newUsers" >
                {{ user.name }}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '.app',
            data: {
                name: '',
                users: [
                    { name: 'Bruce' },
                    { name: 'Chuck' },
                    { name: 'Jackie' },
                    { name: '趙' }
                ] 
            },
            computed: {
                newUsers: function () {
                    var that = this;
                    return that.users.filter(function (user) {
                        return user.name.toLowerCase().indexOf(that.name.toLowerCase()) !== -1;
                    })
                }

            }
        })
    </script>
</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue2.0如何自定義時間過濾器 Vue2.0自定義過濾器 vue2.0版本中v-html中過濾器的使用 Vue.js1.0-2.0 filter過濾器介紹詳細使用 VUE-搜索過濾器 Vue2.0的變化(1)——vue2.0組件定義/生命周期/循環/自定義鍵盤/過濾器/組件通信的變化 Vue 2.0的學習筆記：Vue的過濾器 Vue過濾器 Vue - 過濾器 vue過濾器