vue.js实现购物车

Vue.js可以很方便地实现购物车功能，以下是一个简单的购物车示例：

1. 首先，创建一个Vue实例，并在data中定义购物车的数据：

new Vue({
  el: '#app',
  data: {
    cart: [], // 购物车数组
    products: [ // 商品列表
      { name: '商品1', price: 10 },
      { name: '商品2', price: 20 },
      { name: '商品3', price: 30 },
      { name: '商品4', price: 40 },
    ]
  },
  methods: {
    addToCart: function(product) { // 添加商品到购物车
      var found = false;
      for (var i = 0; i < this.cart.length; i++) {
        if (this.cart[i].product.name === product.name) {
          this.cart[i].quantity++;
          found = true;
        }
      }
      if (!found) {
        this.cart.push({ product: product, quantity: 1 });
      }
    },
    removeFromCart: function(item) { // 从购物车中移除商品
      var index = this.cart.indexOf(item);
      if (index !== -1) {
        this.cart.splice(index, 1);
      }
    },
    getTotalPrice: function() { // 计算购物车总价
      var total = 0;
      for (var i = 0; i < this.cart.length; i++) {
        total += this.cart[i].product.price * this.cart[i].quantity;
      }
      return total;
    }
  }
});

2. 在页面中使用Vue指令绑定数据和方法：

<div id="app">
  <h1>购物车</h1>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="product in products">
        {{ product.name }} - {{ product.price }}元
        <button v-on:click="addToCart(product)">添加到购物车</button>
      </li>
    </ul>
  </div>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cart">
        {{ item.product.name }} - {{ item.product.price }}元 x {{ item.quantity }}
        <button v-on:click="removeFromCart(item)">移除</button>
      </li>
    </ul>
    <p>总价：{{ getTotalPrice() }}元</p>
  </div>
</div>

3. 运行代码，即可看到购物车功能的实现。

以上示例只是一个简单的购物车实现，实际应用中还需要考虑更多的因素，如商品库存、商品属性选择等。