版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-input v-model="keyWorld" placeholder="请输入内容" @input="searchKeyFun"><i class="el-icon-view el-icon--right"></i></el-input>
<ul>
<li v-for="(item,i) in list" :key="i" style="display: flex;">
<p>名称:{{item.name}}</p>
<p>年龄:{{item.age}}</p>
<p>性别:{{item.sex}}</p>
<p>地址:{{item.address}}</p>
</li>
</ul>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function() {
return {
keyWorld: '',
//展示的数据
list:[
{name:"李四",age:"21",sex:"男",address:"北京市东城区"},
{name:"张三",age:"33",sex:"男",address:"上海市徐汇区"},
{name:"周轩",age:"55",sex:"女",address:"天京市滨海区"},
{name:"刘备",age:"66",sex:"男",address:"郑州市二七区"},
{name:"王丽",age:"22",sex:"女",address:"苏州市姑苏区"},
{name:"嬴政",age:"55",sex:"男",address:"杭州市余杭区"},
],
//不变的元数据
searchList:[
{name:"李四",age:"21",sex:"男",address:"北京市东城区"},
{name:"张三",age:"33",sex:"男",address:"上海市徐汇区"},
{name:"周轩",age:"55",sex:"女",address:"天京市滨海区"},
{name:"刘备",age:"66",sex:"男",address:"郑州市二七区"},
{name:"王丽",age:"22",sex:"女",address:"苏州市姑苏区"},
{name:"嬴政",age:"55",sex:"男",address:"杭州市余杭区"},
]
}
},
methods:{
//使用方法。注意:(searchList为元数据,list为搜索过滤后的数据)
searchKeyFun(){
this.list = this.searchFun(this.searchList,this.keyWorld);
},
//筛选封装(注意:要更改为自己的模糊搜索的字段)
searchFun(arr,keyword){
if(keyword ==''||keyword==null){
return arr;
};
let newList = arr.filter(item=>
(item.name.indexOf(keyword)>=0)||
(item.age.indexOf(keyword)>=0)||
(item.sex.indexOf(keyword)>=0)||
(item.address.indexOf(keyword)>=0)
);
return newList;
}
}
})
</script>
</html>