<!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">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="application">
<div>
<input type="radio" value="-1" v-model="sexFilter">全部
<input type="radio" value="0" v-model="sexFilter">男
<input type="radio" value="1" v-model="sexFilter">女
</div>
<div>
搜索:<input type="text" v-model="searchKey">
</div>
<table border="1" width="300px">
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr v-for="(data,index) in showData">
<td>{{data.name}}</td>
<td>{{data.sex==0 ? '男' : "女"}}</td>
</tr>
</table>
</div>
<script>
const mock = [
{
name:'小王',
sex:0
},
{
name:'小张',
sex:1
},
{
name:'小陈',
sex:1
},
{
name:'小方',
sex:0
},
{
name:'小詹',
sex:1
},
{
name:'小巫',
sex:0
},
{
name:'小狗',
sex:1
},
]
const app = {
data(){
return{
//性别筛选字段
sexFilter:-1,
//搜索的关键词
seachKey:"",
//展示的用户列表数据
showData:[]
}
},
mounted(){
setTimeout(this.queryAllData,1000);
},
methods:{
queryAllData(){
this.showData = mock
},
//性别筛选
filterData(){
this.searchKey = ''
if(this.sexFilter == -1)
this.showData = mock
else{
this.showData = mock.filter(data => data.sex == this.sexFilter)
// this.showData = mock.filter(data => data.name.search(this.searchKey) != -1)
}
},
//关键字筛选
searchData(){
this.sexFilter = -1
if(this.search.length ==0)
this.showData = mock
else{
this.showData = mock.filter(data => data.name.search(this.searchKey) != -1)
}
}
},
watch:{
sexFilter(){
this.filterData()
},
searchKey(){
this.searchData()
}
}
}
const application = Vue.createApp(app)
application.mount('#application')
</script>
</body>
</html>
Vue:实现支持搜索和筛选的用户列表
最新推荐文章于 2024-06-22 13:17:38 发布