用vue 写一个购书网页面

好的，以下是一个简单的购书网页面的 Vue 代码示例：

<template>
  <div>
    <h1>图书列表</h1>
    <div v-for="book in books" :key="book.id">
      <h2>{{ book.title }}</h2>
      <p>{{ book.author }}</p>
      <p>{{ book.description }}</p>
      <p>价格：{{ book.price }}元</p>
      <button @click="addToCart(book)">加入购物车</button>
    </div>
    <h1>购物车</h1>
    <div v-for="item in cart" :key="item.book.id">
      <h2>{{ item.book.title }}</h2>
      <p>数量：{{ item.quantity }}</p>
      <p>小计：{{ item.subtotal }}元</p>
    </div>
    <p>总计：{{ total }}元</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: [
        {
          id: 1,
          title: 'JavaScript高级程序设计',
          author: 'Nicholas C. Zakas',
          description: '介绍JavaScript语言核心和客户端JavaScript编程',
          price: 99.00
        },
        {
          id: 2,
          title: 'Vue.js实战',
          author: '梁灏',
          description: '深入浅出Vue.js技术栈的设计和实现',
          price: 79.00
        },
        {
          id: 3,
          title: '深入浅出Node.js',
          author: '朴灵',
          description: '介绍Node.js的核心概念和基本用法',
          price: 69.00
        }
      ],
      cart: []
    }
  },
  computed: {
    total() {
      return this.cart.reduce((sum, item) => sum + item.subtotal, 0)
    }
  },
  methods: {
    addToCart(book) {
      const item = this.cart.find(i => i.book.id === book.id)
      if (item) {
        item.quantity++
        item.subtotal = item.quantity * book.price
      } else {
        this.cart.push({
          book: book,
          quantity: 1,
          subtotal: book.price
        })
      }
    }
  }
}
</script>

这段代码实现了一个简单的购书网页面，包括图书列表和购物车两个部分。在图书列表中，我们展示了三本书的基本信息，同时提供了加入购物车的按钮。在购物车中，我们展示了加入购物车的书籍信息，以及每本书的数量和小计，最后展示了购物车的总计。当用户点击加入购物车按钮时，我们将该书籍添加到购物车中，如果购物车中已经存在该书籍，则增加其数量和小计，否则创建一个新的购物车项。