| 模糊查询（前端） | 您所在的位置：网站首页 › 华为nova5i屏幕多大尺寸大小啊 › 模糊查询（前端） |
|
首先，模糊查询一般交由后台处理。 （数组对象的） 当然前端也可以实现，我这里的主要实现方式有两种，其一是使用fitler 过滤器： ilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 注意： filter() 不会对空数组进行检测。 注意： filter() 不会改变原始数组。 话不多说，上代码： DOCTYPE html> 模糊查询fitler 搜索 序号 姓名 性别 爱好 年龄 {{i+1}} {{item.name}} {{item.sex}} {{item.hobby}} {{item.age}} var vm = new Vue({ el:'.container', data:{ text:'', info: [{ name: '雷森', sex: '男', hobby: '打篮球', age: '18' },{ name: '刘伟', sex: '男', hobby: '旅游', age: '24' },{ name: '刘微', sex: '女', hobby: '旅游', age: '24' }, { name: '胡汉三', sex: '男', hobby: '美食', age: '30' }, { name: '张艺', sex: '女', hobby: '看韩剧', age: '24' }, { name: '欧阳', sex: '女', hobby: '环游世界', age: '25' }] }, computed:{ searchResult() { if (this.text) { // console.log(this.info) return this.info.filter( item => item.name.indexOf(this.text) > -1 || item.hobby.indexOf(this.ipt) > -1 ); } else { return this.info; } } } })其二是使用indexof（）方法，indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1； 定义一个新的空数组，对原数组遍历，用indexOf判断，不等一 -1，就push到新数组里，最后teturn 新数组 DOCTYPE html> 模糊查询 搜索 序号 姓名 性别 爱好 年龄 {{i+1}} {{item.name}} {{item.sex}} {{item.hobby}} {{item.age}} var vm = new Vue({ el:'.container', data:{ text:'', info: [{ name: '雷森', sex: '男', hobby: '打篮球', age: '18' },{ name: '刘伟', sex: '男', hobby: '旅游', age: '24' },{ name: '刘微', sex: '女', hobby: '旅游', age: '24' }, { name: '胡汉三', sex: '男', hobby: '美食', age: '30' }, { name: '张艺', sex: '女', hobby: '看韩剧', age: '24' }, { name: '欧阳', sex: '女', hobby: '环游世界', age: '25' }] }, computed:{ searchResult() { if (this.text) { console.log(this.info) return this.info.filter( item => item.name.indexOf(this.text) > -1 || item.hobby.indexOf(this.ipt) > -1 ); } else { return this.info; } } } }) |
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 |