vue中列表过滤

最新推荐文章于 2022-08-19 19:57:42 发布

Gjanuary

最新推荐文章于 2022-08-19 19:57:42 发布

阅读量102

点赞数

分类专栏：前端学习记录文章标签： vue.js

本文链接：https://blog.csdn.net/Gjanuary/article/details/121662169

版权

前端学习记录专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>列表过滤</title>
	<script type="text/javascript" src="./vuebasic/vue.js"></script>
</head>
<body>
	
	<div id="root" >
        <h1>模糊搜索</h1>
        <input type="text" placeholder="请输入名字" v-model="keyWords">
        <h6>第2种方法处理结果</h6>
        <ul>    
            <li v-for="(people,index) in filpepple" :key="people.id">
                {{ people.name }} ==> {{ people.gender}}
            </li>
        </ul>

        <h6>第1种方法处理结果</h6>
        <ul>
            
            <li v-for="(people,index) in fliterName" :key="people.id">
                {{ people.name }} ==> {{ people.gender}}
            </li>
        </ul>
	</div>
	
	<script>
	
	
		Vue.config.productionTip = false;//以阻止 vue 在启动时生成生产提示。
        new Vue({
		    el:'#root',
            data:{
                keyWords:'',
                peoples:[
                    {'id':'1','name':'张曼玉','gender':'女'},
                    {'id':'2','name':'张雨生','gender':'男'},
                    {'id':'3','name':'林雨申','gender':'男'},
                    {'id':'4','name':'佟湘玉','gender':'女'}
                ],
                filpepple:[

                ]
            },
            // 第1中处理方法,使用计算属性来操作
            computed:{
                fliterName(){
                    return this.peoples.filter((p)=>{
                       return p.name.indexOf(this.keyWords) !== -1
                    })
                }
            },

            // 第2种处理方法,使用监听方式
            watch:{
                /*
                keyWords(newValue,oldValue){
                    this.filpepple = this.peoples
                    this.filpepple = this.filpepple.filter((p)=>{
                        return p.name.indexOf(newValue) !== -1
                    })
                }*/
                keyWords:{
                    // 在关键字没有进行更改之前初始化的时候就会进行一次监视
                    // indexof会匹配任意空格返回的结果都是0非负数，在这里就会都会匹配出来
                    immediate:true,
                    handler(newValue){
                        this.filpepple = this.peoples
                        this.filpepple = this.filpepple.filter((p)=>{
                            return p.name.indexOf(newValue) !== -1
                        })
                    }
                }
            }
	   })
	</script>
</body>
</html>

Gjanuary

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue中列表过滤

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>列表过滤</title> <script type="text/javascript" src="./vuebasic/vue.js"></script></head><body> <div id="root" > <h.
复制链接

扫一扫