vue列表的过滤

最新推荐文章于 2024-06-27 17:17:55 发布

所念皆星河73

最新推荐文章于 2024-06-27 17:17:55 发布

阅读量271

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_60664694/article/details/127415441

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

模糊搜索，并显示。
可以复制代码，自己去演示，看下效果。

用watch实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<!--注意改成你自己的路径-->
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- v-model收集用户的输入，双向绑定 -->
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="p in filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>

    </div>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            keyWord:'',//初始为空串
            persons:[
                {id:'2001',name:'马冬梅',age:18,sex:'女'},
                {id:'4002',name:'李冬瓜',age:19,sex:'女'},
                {id:'6003',name:'墨冬',age:20,sex:'女'},
                {id:'8004',name:'周杰伦',age:28,sex:'男'},
                {id:'1907',name:'盖伦',age:21,sex:'男'},
                {id:'8909',name:'温兆伦',age:20,sex:'男'},

            ],
            filterPersons:[]//存放过滤后的，这是一个临时性的，动态变化的数组
        },
        watch:{
            //当输入框里发生改变时(即keyWord发生变化时)，就调用
            //位置参数：参1是新值，参2是旧值。这不需要旧值，所以只写一个参数即可
            //任何串都包含了空字符'',下标为0。
            keyWord:{
                immediate:true, //初始化时调用一下handler（必须有，否则，初始时filterPersons是空数组，页面无数据）
                //箭头函数其实和java中的Lambda表达式非常类似。不等于-1表示name里包含此关键字
                handler(val){
                    this.filterPersons = this.persons.filter(p=>{
                        return p.name.indexOf(val) !==-1})
                }
            }
        }

    })
</script>
</body>
</html>

计算属性实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤，计算属性实现</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- v-model收集用户的输入 ，双向绑定-->
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="p in filterPersons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>

    </div>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            keyWord:'',//初始为空串
            persons:[
                {id:'2001',name:'马冬梅',age:18,sex:'女'},
                {id:'4002',name:'李冬瓜',age:19,sex:'女'},
                {id:'6003',name:'墨冬',age:20,sex:'女'},
                {id:'8004',name:'周杰伦',age:28,sex:'男'},
                {id:'1907',name:'盖伦',age:21,sex:'男'},
                {id:'8909',name:'温兆伦',age:20,sex:'男'},

            ],
        },
        computed:{
            //2个时机会调用：初始时调用一次。当依赖的数据keyWord发生变化时就调用，
            //只要数据参与了计算，则就依赖它
            filterPersons(){
                return this.persons.filter(p=>p.name.indexOf(this.keyWord)!==-1)
            }
        }

    })
</script>
</body>
</html>