vue监听购物车数量和金额变化以及物品模糊查询

简单的html 没有写样式

<div>
        <div>
            <input type="text" placeholder="请输入" v-model="input">
        </div>
        <table>
            <thead>
                <tr>
                    <td>名称</td>
                    <td>数量</td>
                    <td>总量</td>
                    <td>单价</td>
                    <td>总价</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,i) in itemData" :key="i">
                    <td>{{item.name}}</td>
                    <td>
                        <button :disabled="item.num == 1" @click="item.num-=1">-</button>
                        <span>{{item.num}}</span>
                        <button :disabled="item.num == item.nums" @click="item.num+=1">+</button>
                    </td>
                    <td>{{item.nums}}</td>
                    <td>{{priceFil(item.price,2)}}</td>
                    <td>{{priceFil(item.num * item.price,2) }}</td>
                </tr>
            </tbody>
        </table>
        <div>
            总计{{commoditySum}}件，一共{{priceFil(grossAmount,2)}}元
        </div>
    </div>

export default {
    data() {
        return {
            input:'',
            items:[ 
                {
                 price:10,
                 nums:10, 
                 num:1,
                 name:'长袖'
                },
                {
                 price:10,
                 nums:10, 
                 num:1, 
                 name:'短袖'
                },
                {
                 price:10,
                 nums:10, 
                 num:1, 
                 name:'裙子'
                }
            ]
        }
    },
    filter:{
        
    },
    computed:{
        commoditySum:function(){
            // 购物车商品的总件数，用了两种方法，用reduce看起来比较简洁
            // let num = 0;
            // this.itemData.forEach(item => {
            //     num += item.num;
            // });
            // return num;
            return this.itemData.reduce((total,num)=>{
                return total += num.num;
            },0);
        },
        grossAmount:function(){
        	//这是计算商品的总价格
            // let num = 0;
            // this.itemData.forEach(item => {
            //     num += item.num * num.price;
            // });
            // return num;
            return this.itemData.reduce((total,num)=>{
                return total += num.num * num.price;
            },0);
        },
        itemData:function(){
        	//先判断input框有没有输入内容，如果没有输入内容就返回所有的商品数据
            if(!this.input) return this.items;
            //filter方法会创建一个新的数组所以这样写会比较简洁
            //也可以定义一个空数组然后循环所有的商品，然后判断满足条件的就push到空数组里面 最后return          定义的数组
            return this.items.filter((item,i)=>{
            	//使用indexOf的话就需要判断一下返回的结果是不是-1，因为includes返回的结果就是true或者false所以不需要判断
                return item.name.indexOf(this.input) != -1;
                // return item.name.includes(this.input);
            });
        }
    },
    methods:{
    	//第二个参数是需要保留多少位小数，这是根据项目需求来的
        priceFil:(data,num)=>{
        	//如果大多都是需要保留两位小数可以给一个默认值，这样就不用每次都传参数
       		//if(!num) num = 2;
            return '￥' + data.toFixed(num);
        }
    }
}

因为vue3.x不支持过滤器 所以文本转换是用自己定义的方法