用vue实现简单的列表过滤

idiot_MAN

已于 2023-01-05 10:15:26 修改

阅读量452

点赞数

分类专栏： vue2 文章标签： vue.js javascript 前端

于 2022-12-23 16:38:18 首次发布

本文链接：https://blog.csdn.net/idiot_MAN/article/details/128421247

版权

vue2 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

用vue实现简单的列表过滤+排序

请添加图片描述

实现如图所示的筛选效果

方法一：

使用watch实现

<!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://cdn.jsdelivr.net/npm/vue@2"></script>
	</head>

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			//用watch实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					],
					filPerons:[]
				},
				watch:{
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}
			})

		</script>
</html>

方法二
用computed实现（推荐使用）

<!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://cdn.jsdelivr.net/npm/vue@2"></script>
	</head>

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>人员列表</h2>
			<input type="text" placeholder="请输入名字" v-model="keyWord">
			<ul>
				<li v-for="(p,index) of filPerons" :key="index">
					{{p.name}}-{{p.age}}-{{p.sex}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			
			
			//用computed实现
			new Vue({
				el:'#root',
				data:{
					keyWord:'',
					persons:[
						{id:'001',name:'马冬梅',age:19,sex:'女'},
						{id:'002',name:'周冬雨',age:20,sex:'女'},
						{id:'003',name:'周杰伦',age:21,sex:'男'},
						{id:'004',name:'温兆伦',age:22,sex:'男'}
					]
				},
				computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}
			}) 
		</script>
</html>

实现如图所示的筛选+排序效果

<!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">
  <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
  <title>Document</title>
</head>
<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <button @click="sortType=1">年龄升序</button>
    <button @click="sortType=2">年龄降序</button>
    <button @click="sortType=0">原顺序</button>
    <ul>
      <li v-for="(p,index) of filPerons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
      </li>
      
    </ul>
  </div>

  <script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
      el:'#root',
      data:{
        keyWord:'',
        sortType:0,  //0代表原顺序 ，1代表升序，2代表降序
        persons:[
          {id:'001',name:'马冬梅',age:19,sex:'女'},
          {id:'002',name:'周冬雨',age:21,sex:'女'},
          {id:'003',name:'周杰伦',age:18,sex:'男'},
          {id:'004',name:'温兆伦',age:22,sex:'男'}
        ]
      },
      computed:{
        filPerons(){
          const arr= this.persons.filter((p)=>{
            return p.name.indexOf(this.keyWord) !== -1
          })
          if(this.sortType){
            arr.sort((p1,p2)=>{
             return this.sortType===1?p1.age-p2.age:p2.age-p1.age
            })
          }
          return arr
        }
      }
    }) 
  </script>
</html>