简单的过滤数组案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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"> 女
<hr>
<hr>
<hr>
<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="node_modules/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
filterByName: '',
filterByGender: '',
inputName: '',
users: [
{
id: 1,
name: 'Jack',
gender: '男'
},
{
id: 2,
name: 'Mary',
gender: '女'
},
{
id: 3,
name: 'Tony',
gender: '男'
},
{
id: 4,
name: 'Sofia',
gender: '女'
},
{
id: 5,
name: 'Mike',
gender: '男'
}
]
},
computed: {
filterUsers () {
return this.users.filter(u => u.name.includes(this.filterByName) && u.gender.includes(this.filterByGender))
}
}
})
</script>
</body>
</html>
网友评论