模糊查询（前端）
首先，模糊查询一般交由后台处理。
（数组对象的）
当然前端也可以实现，我这里的主要实现方式有两种，其一是使用fitler 过滤器：
ilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
话不多说，上代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<title>模糊查询fitlertitle>
head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" style="margin:20px">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索button>
span>
<input type="text" v-model="text" class="form-control" placeholder="Search for...">
div>
div>
<table class="table table-hover">
<thead>
<tr>
<th>序号th>
<th>姓名th>
<th>性别th>
<th>爱好th>
<th>年龄th>
tr>
thead>
<tbody>
<tr v-for="(item,i) in searchResult" :key="i">
<td>{{i+1}}td>
<td>{{item.name}}td>
<td>{{item.sex}}td>
<td>{{item.hobby}}td>
<td>{{item.age}}td>
tr>
tbody>
table>
div>
<script>
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;
}
}
}
})
script>
body>
html>
其二是使用indexof（）方法，indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
定义一个新的空数组，对原数组遍历，用indexOf判断，不等一 -1，就push到新数组里，最后teturn 新数组
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<title>模糊查询title>
head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6" style="margin:20px">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">搜索button>
span>
<input type="text" v-model="text" class="form-control" placeholder="Search for...">
div>
div>
<table class="table table-hover">
<thead>
<tr>
<th>序号th>
<th>姓名th>
<th>性别th>
<th>爱好th>
<th>年龄th>
tr>
thead>
<tbody>
<tr v-for="(item,i) in searchResult" :key="i">
<td>{{i+1}}td>
<td>{{item.name}}td>
<td>{{item.sex}}td>
<td>{{item.hobby}}td>
<td>{{item.age}}td>
tr>
tbody>
table>
div>
<script>
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;
}
}
}
})
script>
body>
html>