用vue中的绑定事件来进行添加/删除商品 - 修改商品数量 - 单价排序

在Vue.js中，你可以使用`v-on`指令来绑定事件处理程序。对于添加、删除商品以及修改商品数量和单价排序，可以这样做：

1. **添加/删除商品**:
使用`v-on:click`或`@add-product`这样的语法来监听某个按钮的点击事件：

   <button @click="addItem">添加商品</button>
   <button @click="deleteItem(item)">删除商品</button>

在相应的JavaScript组件里，定义`addItem`和`deleteItem`方法。

2. **修改商品数量**:
绑定输入框的`input`事件到`updateQuantity`方法，比如：

   <input type="number" v-model.number="item.quantity" @input="updateQuantity(item)">

这样每次输入改变，会触发`updateQuantity`方法更新商品的数量。

3. **单价排序**:
可能需要在数组操作完成后手动设置排序，例如在数据改变后调用`sortProducts`方法：

   data() {
     return {
       products: [...]
     }
   },
   methods: {
     sortProducts(key) {
       this.products.sort((a, b) => a.price - b.price); // 按升序排列
       // 或者按用户选择的排序方式调整比较函数
     },
   },
   computed: {
     sortedProducts() {
       return this.products.sort((a, b) => a[key] - b[key]); // 根据属性名动态排序
     },
   }

然后在模板上展示排序后的列表。