vue数据搜索与排序

最新推荐文章于 2024-04-26 16:47:03 发布

ITBOY_ITBOX

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量347

点赞数 10

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

本文链接：https://blog.csdn.net/m0_37294838/article/details/136684922

版权

VUE 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <input type="text" v-model="keyword"/>
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">原顺序</button>
        <br>
        人员信息列表：
        <li v-for="item in filPerson" :key="item.id">
            {{item.id}}-{{item.name}}-{{item.age}}-{{item.sex}}
        </li>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const vm=new Vue({
            el:"#root",
            data:{
                keyword:"",
                sortType:0,
                person: [
                    {"id": "001", "name": "马冬梅", "age": 19,"sex":"女"},
                    {"id": "002", "name": "周冬雨", "age": 20,"sex":"女"},
                    {"id": "003", "name": "周杰伦", "age": 21,"sex":"男"},
                    {"id": "004", "name": "温兆伦", "age": 22,"sex":"男"}
                ],
                // filPerson:[]
            },
            // watch:{
            //     keyword:{
            //         immediate:true,
            //         handler(val){
            //               this.filPerson = this.person.filter((p) => {
            //                 return p.name.indexOf(val) !== -1
            //             })
            //         }
            //     }
            // }
               computed: {
                filPerson(){
                    //获取按条件搜索后的结果数据
                    const arr= this.filPerson = this.person.filter((p) => {
                        return p.name.indexOf(this.keyword) !== -1
                    })
                    
                    arr.sort((p1,p2)=>{
                        return this.sortType===1?p2.age-p1.age: p1.age - p2.age
                    })
                    return arr
                }
            }
        })
    </script>
</body>
</html>