Vue——过滤案例
呈现效果:
第一步:定义一个id为app的div
<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>
有多种方案实现过滤
1.基础方案
<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>
——存在this指向问题 在外部,定义一个_this,内部用_this
2.改进方案,使用箭头函数
methods中重写:
// 2 使用箭头函数 handleSearch() { this.newDataList = this.dataList.filter(item => { if (item.indexOf(this.search) >= 0) { return true } else { return false } }) }
3.最终方案,优化方案2
methods中重写:
// 3 终极方案 handleSearch() { this.newDataList = this.dataList.filter(item => item.indexOf(this.search) >= 0) }