VUE模糊查询及排序实践

最新推荐文章于 2022-05-21 11:00:13 发布

聪明的小呆呆

最新推荐文章于 2022-05-21 11:00:13 发布

阅读量162

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/lzh623015455/article/details/105195955

版权

Vue模糊查询及排序实践

1. html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模糊查询及排序实践</title>
    <script type="text/javascript" src="../test1/js/vue.js"></script>
    <link type="text/css "  rel="stylesheet"  href="css/insearch.css">
</head>
<body>

    <div id="test2" >
        <h2 >模糊查询：</h2>
        <input type="text" v-model="searchName" class="test1">
        <ul class="test1">
<!--            filterPersons用到过滤运算 computed-->
            <li v-for="(item ,index) in filterPersons" :key="index">{{item.name}}----{{item.age}}</li>
        </ul>

        <h2 >排序：</h2>
        <button @click="setOrderType(1)">年龄升序</button>
        <button @click="setOrderType(2)">年龄降序</button>
        <button @click="setOrderType(0)">年龄原序</button>
    </div>




    <script type="text/javascript">
        vm = new Vue ({
            el:'#test2',
            data:{
                persons:[
                    {name:'Bob',age:'21'},
                    {name:'Jack',age:'20'},
                    {name:'Alex',age:'19'},
                    {name:'Rose',age:'23'},
                    {name:'Smith',age:'20'},
                ],
                searchName:'',
                orderType: 0,//0代表原序，1代表升序，2代表降序
            },
            computed:{
                filterPersons(){
                    //取出相关的数据，
                    const  {searchName,persons,orderType} = this;

                    //最终需要显示的数据
                    let fPersons;

                    // 匹配到满足条件的记录该下标，否则下标为-1;然后对person是进行过滤,过滤掉下标为-1的元素。
                    fPersons = persons.filter(item => item.name.indexOf(searchName)>=0);

                    //排序
                    if(orderType!=0){
                        fPersons.sort(function(item1,item2){//如果返回负数，则item1在前；反之item2在前
                            //1代表升序，2代表降序
                            if(orderType==1){
                                return  item1.age - item2.age;
                            }else{
                                return  item2.age - item1.age;
                            }
                        })
                    }

                    return fPersons;
                }
            },
            methods:{
                //通过按钮点击事件进行改变参数index对原数据进行排序过滤
                setOrderType(index){
                    this.orderType = index;
                }
            }
        })
    </script>
</body>
</html>

2. css文件

#test2{
    position: absolute;
    width: 600px;
    height: 800px;
    left: 40%;
    background: aqua;
}
.test1{
    position: relative;
    left: 40%;
    border: 2px solid seagreen;
    width: 150px;
}
body{
    background: black;
}

聪明的小呆呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE模糊查询及排序实践

Vue模糊查询及排序实践1. html文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模糊查询及排序实践</title> <script type="text/javascript" src=".....
复制链接

扫一扫