vue使用computed實現動態過濾

效果：

 

 

 <div id="test">
        Filter:<input type="text" v-model="searchlanguage" />

       <ul>
            <li v-for="language in searchResults">
                {{language}}
            </li>
        </ul>
    </div>

 

  new Vue({
            el: '#test',
            data() {
                return{
                    searchlanguage: '',
                    devlanguages: [
                        'angularjs',
                        'vue.js',
                        'asp.net',
                        'asp.net mvc',
                        'mysql',
                        'ms sql server',
                        'python',
                        '.net core'
                    ]
                }
            },
            computed: {
                searchResults() {
                    let filter = new RegExp(this.searchlanguage, 'i')
                    return this.devlanguages.filter(el => el.match(filter))
                }
            }
        })

 

computed是計算屬性，是基於它們的響應式依賴進行緩存的。即是說，只有在相關響應式依賴發生改變時它們才會重新求值。