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

news2024/11/24 15:03:39

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>