使用vue制作一购物网页，至少显示12种商品。并且要求实现购物车功能：可以把商品加入到购物车中，同种商品可以多次购买，购物车中显示数量；也可以减少购物车商品数量；能自动计算出总价格；数量为0时将商品移出购物车。请给出实现的具体代码

以下是一个简单的使用Vue.js实现购物车功能的示例代码：

HTML：

<div id="app">
  <h2>商品列表</h2>
  <ul>
    <li v-for="(item, index) in products" :key="index">
      {{ item.name }} - {{ item.price }}
      <button @click="addToCart(item)">加入购物车</button>
    </li>
  </ul>
  <h2>购物车</h2>
  <ul>
    <li v-for="(item, index) in cart" :key="index">
      {{ item.name }} - {{ item.price }} x {{ item.quantity }}
      <button @click="removeFromCart(item)">-</button>
      <button @click="addToCart(item)">+</button>
    </li>
  </ul>
  <p>总价：{{ totalPrice }}</p>
</div>

JavaScript：

new Vue({
  el: '#app',
  data: {
    products: [
      { id: 1, name: '商品1', price: 10 },
      { id: 2, name: '商品2', price: 20 },
      { id: 3, name: '商品3', price: 30 },
      { id: 4, name: '商品4', price: 40 },
      { id: 5, name: '商品5', price: 50 },
      { id: 6, name: '商品6', price: 60 },
      { id: 7, name: '商品7', price: 70 },
      { id: 8, name: '商品8', price: 80 },
      { id: 9, name: '商品9', price: 90 },
      { id: 10, name: '商品10', price: 100 },
      { id: 11, name: '商品11', price: 110 },
      { id: 12, name: '商品12', price: 120 },
    ],
    cart: [],
  },
  methods: {
    addToCart(item) {
      const index = this.cart.findIndex((cartItem) => cartItem.id === item.id);
      if (index === -1) {
        this.cart.push({ ...item, quantity: 1 });
      } else {
        this.cart[index].quantity++;
      }
    },
    removeFromCart(item) {
      const index = this.cart.findIndex((cartItem) => cartItem.id === item.id);
      if (this.cart[index].quantity > 1) {
        this.cart[index].quantity--;
      } else {
        this.cart.splice(index, 1);
      }
    },
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
    },
  },
});

上面的代码中，我们使用了Vue.js的数据绑定、计算属性等功能，实现了一个简单的购物车功能。具体实现过程如下：

1. 在`data`中定义了`products`和`cart`数组，分别用于存储商品列表和购物车中的商品。
2. 在HTML中使用`v-for`指令遍历`products`数组，显示商品列表，并为每个商品添加了一个“加入购物车”的按钮。
3. 同样使用`v-for`指令遍历`cart`数组，显示购物车中的商品，对于每个商品，显示商品名称、价格、数量，以及增加/减少数量的按钮。
4. 在`addToCart`方法中，首先查找购物车中是否已经有了该商品，如果没有，则将该商品添加到购物车中，并设置数量为1；如果已经存在，则将该商品的数量加1。
5. 在`removeFromCart`方法中，首先查找购物车中该商品的索引，如果该商品的数量大于1，则将数量减1；否则，将该商品从购物车中移除。
6. 在`totalPrice`计算属性中，使用`reduce`方法累加购物车中各商品的总价，得到购物车的总价。

注意，上面的代码只是一个简单的示例，没有考虑到一些实际应用中可能遇到的问题，例如：商品数量不能为负数、商品数量超过库存时应该如何处理等等。在实际应用中需要根据具体情况进行扩展和完善。