用vue写表格实现数量的加减

可以使用Vue的v-model和计算属性来实现表格中数量的加减功能。

首先，在Vue实例中定义一个数组items，数组中包含多个对象，每个对象代表表格中的一行数据，包含一个quantity属性来表示数量。例如：

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'item 1', quantity: 0 },
      { id: 2, name: 'item 2', quantity: 0 },
      { id: 3, name: 'item 3', quantity: 0 },
    ]
  },
  methods: {
    increment(item) {
      item.quantity++;
    },
    decrement(item) {
      if (item.quantity > 0) {
        item.quantity--;
      }
    }
  },
  computed: {
    totalQuantity() {
      return this.items.reduce((sum, item) => sum + item.quantity, 0);
    }
  }
});

然后，在模板中通过v-for指令遍历items数组，并使用v-model指令将数量绑定到输入框中。同时，使用两个按钮调用increment和decrement方法来增加或减少数量。最后使用计算属性totalQuantity来计算所有商品的总数量。

<div id="app">
  <table>
    <tr v-for="item in items" :key="item.id">
      <td>{{ item.name }}td>
      <td>
        <button @click="decrement(item)">-button>
        <input type="number" v-model="item.quantity">
        <button @click="increment(item)">+button>
      td>
    tr>
  table>
  <p>Total quantity: {{ totalQuantity }}p>
div>

这样，当点击加号按钮时，对应商品的数量会增加，当点击减号按钮时，对应商品的数量会减少。总数量会根据计算属性的逻辑自动更新。

参考文档：

• v-model：https://vuejs.org/v2/guide/forms.html#Basic-Usage
• 计算属性：https://vuejs.org/v2/guide/computed.html