vue实现按钮增减数量

在Vue中实现按钮增减数量通常需要双向数据绑定和计算属性。你可以将每个书籍对象的“count”属性作为Vue实例的一个数据属性，并在按钮的`@click`事件中，通过计算属性或方法实时更新该值。这里是一个简单的示例：

首先，在你的`data`里初始化数量变量：

<script setup>
import { ref } from 'vue'

// 创建一个对象数组并初始化数量
const books = ref([
  { id: '1', name: '书名1', publishDate: '日期', price: '价格', count: 0 },
  // 其他书籍...
]);

// 定义计算属性增加和减少数量的方法
const increaseCount = (index) => {
  books.value[index].count++;
};

const decreaseCount = (index) => {
  books.value[index].count--;
};
</script>

然后在模板中，你可以在每个书籍行的相应位置添加按钮，并绑定了`increaseCount`和`decreaseCount`方法：

<template>
  <div>
    <table>
      <!-- ... -->
      <tr v-for="(book, index) in books" :key="book.id">
        <!-- ... -->
        <td>
          <button @click="decreaseCount(index)">-</button>
          <span>{{ book.count }}</span>
          <button @click="increaseCount(index)">+</button>
        </td>
        <!-- ... -->
      </tr>
      <!-- ... -->
    </table>
  </div>
</template>

现在每次点击+/-按钮，对应的书籍数量都会实时更新，因为这是基于Vue的数据绑定机制工作的。