vue——过滤案例

<div id="app">
    <h1>过滤案例</h1>
    // 绑定input事件、记录用户输入数据search
    <input type="text" v-model="search" @input="handleSearch">
    <ul>
        // 循环过滤后的列表，展示到前端页面
        <li v-for="item in newDataList">{{item}}</li>
    </ul>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
            newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'bee', 'c', 'cs', 'csrf'],
        },
        methods: {
            //1 笨办法实现过滤
            handleSearch() {
                console.log(this)  // this  是vue实例
                var _this = this
                // 过滤dataList 中每一个是否包含用户输入的 this.search
                this.newDataList = this.dataList.filter(function (item) {
                    console.log(_this) // this 是window对象
                    if (item.indexOf(_this.search) >= 0) {
                        return true
                    } else {
                        return false
                    }
                })

            }

        }

    })
</script>

// 2 使用箭头函数
handleSearch() {
    this.newDataList = this.dataList.filter(item => {
        if (item.indexOf(this.search) >= 0) {
            return true
        } else {
            return false
        }
     })
}

// 3 终极方案
handleSearch() {
    this.newDataList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
}