Vue.js-筛选搜索小案例
目录
Vue.js 筛选搜索小案例
使用Vue.js编写一个很小的筛选搜索案例。
根据姓名搜索，性别筛选。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选小案例</title>
</head>
<body>
<div id="app">
<input type="text" v-model="inputName">
<button @click="filterByName = inputName">搜索</button>
<br>
性别:
<input type="radio" value="" name="gender" v-model="filterByGender">全部
<input type="radio" value="男" name="gender" v-model="filterByGender">男
<input type="radio" value="女" name="gender" v-model="filterByGender">女
<br>
<br>
<table>
<thead>
<th>id</th>
<th>姓名</th>
<th>性别</th>
</thead>
<tbody>
<tr v-for="item in filterUsers">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
filterByName: '',
filterByGender: '',
inputName: '',
users: [
{
id: 1,
name: 'Jack',
gender: '男'
},
{
id: 2,
name: 'abc',
gender: '女'
},
{
id: 3,
name: 'vaxc',
gender: '男'
},
{
id: 4,
name: 'awe2',
gender: '女'
},
{
id: 5,
name: 'ave',
gender: '男'
}
]
},
computed:{
filterUsers(){
return this.users.filter(u => u.name.includes(this.filterByName) && u.gender.includes(this.filterByGender))
}
}
})
</script>
</body>
</html>代码可直接运行。
效果图
