Vue编写表单常用操作（过滤和排序）

爱敲代码的小林

已于 2023-08-14 17:14:27 修改

阅读量317

点赞数 15

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

于 2023-08-14 15:08:56 首次发布

本文链接：https://blog.csdn.net/zky__sch/article/details/132276201

版权

Vue2 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

HTML代码：

js代码：

效果展示：

此次的编写代码可以直接使用

HTML代码：

<body>
    <div id="app">
        <div v-for="(value,key) in person">
            {{key}}--{{value}}
        </div>
        <div>商品名：<input type="text" v-model="shuruInput"></div>
        <div v-for="(item,index) in newShangpin">
            {{item.name}}--{{item.price}}
        </div>
        <div>
            <button @click="keyword=1">升序</button>
            <button @click="keyword=2">降序</button>
            <button @click="keyword=0">原顺序</button>
        </div>
    </div>
</body>

js代码：

<script src="../js/vue2.7.js"></script><!--根据自己vue文件的地址输入-->
<script>
     var app = new Vue({
        el: '#app',
        data() {
            return {
                shuruInput:'',
                shangpin:[
                    {name:"牛仔裤",price:200},
                    {name:"运动裤",price:300},
                    {name:"运动鞋",price:100},
                    {name:"篮球鞋",price:400},
                ],
                keyword:0
            }
        },
        computed:{
            newShangpin(){
                let list=this.shangpin.filter((item)=>{
                    return item.name.indexOf(this.shuruInput)!==-1;
                })
                //排序不等于0执行
                if(this.keyword){
                    list.sort((a1,a2)=>{
                        return this.keyword===1
                        ? a1.price-a2.price
                        : a2.price-a1.price
                    })
                }
                return list;
            },
        },
    });
</script>