以下文章将解读并展示如何使用Vue属性监听和计算属性的方法,实现一个列表过滤。
1、首先看下最终要实现的效果
![最终实现的过滤和排序效果GIF图](https://i-blog.csdnimg.cn/blog_migrate/8888a2a6ac553c5fd67ef519b2c39819.gif)
2、过滤实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表过滤01</title>
<script type="text/javascript" src="js/vue.js"></script>
<!--jQuery 百度CDN-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<style>
#box{
padding: 20px;
}
thead {
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<div>
<input type="text" class="form-control" placeholder="请输入关键词" style="border-radius: 0;" v-model="keyword">
</div>
<table class="table table-bordered table-hover">
<tbody>
<tr v-for="(person, index) in filterPersons" :key="person.id">
<td>{
{index+1}}</td>
<td>{
{person.name}}</td>
<td>{
{person.sex}}</td>
<td>{
{person.age}}</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:'#box',
data:{
keyword:'',
persons:[
{id:'001', name:'马冬梅', sex:'女', age:18},
{id:'002', name:'周冬雨', sex:'女', age:19},
{id:'003', name:'周杰伦', sex:'男', age:20},
{id:'004', name:'温兆伦', sex:'男', age:40},
],
filterPersons:[]
},
watch:{
keyword:{
immediate:true,
handler(newValue){
this.filterPersons = this.persons.filter((person)=>{
return person.name.indexOf(newValue) !== -1;
})
}
}
}
});
</script>
</body>
</html>