给我写一个vue的购物车有全选和计算商品价格

当然可以！以下是一个带有全选和计算商品价格功能的Vue购物车示例：

HTML部分：

<div id="app">
  <h2>购物车</h2>
  <label>
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll">全选
  </label>
  <ul>
    <li v-for="item in cartItems" :key="item.id">
      <label>
        <input type="checkbox" v-model="item.selected" @change="updateTotalPrice"> {{ item.name }} - {{ item.price }}
      </label>
      <button @click="removeFromCart(item)">删除</button>
    </li>
  </ul>
  
  <h3>总价: {{ totalPrice }}</h3>
  
  <h2>商品列表</h2>
  <ul>
    <li v-for="item in products" :key="item.id">
      <label>
        <input type="checkbox" v-model="item.selected" @change="updateTotalPrice"> {{ item.name }} - {{ item.price }}
      </label>
      <button @click="addToCart(item)">加入购物车</button>
    </li>
  </ul>
</div>

JavaScript部分：

new Vue({
  el: '#app',
  data: {
    cartItems: [],
    products: [
      { id: 1, name: '商品1', price: 10, selected: false },
      { id: 2, name: '商品2', price: 20, selected: false },
      { id: 3, name: '商品3', price: 30, selected: false },
    ],
    selectAll: false,
    totalPrice: 0
  },
  methods: {
    addToCart(item) {
      item.selected = true;
      this.cartItems.push(item);
      this.updateTotalPrice();
    },
    removeFromCart(item) {
      const index = this.cartItems.indexOf(item);
      if (index > -1) {
        this.cartItems.splice(index, 1);
        item.selected = false;
        this.updateTotalPrice();
      }
    },
    toggleSelectAll() {
      for (let item of this.products) {
        item.selected = this.selectAll;
      }
      for (let item of this.cartItems) {
        item.selected = this.selectAll;
      }
      this.updateTotalPrice();
    },
    updateTotalPrice() {
      this.totalPrice = 0;
      for (let item of this.cartItems) {
        if (item.selected) {
          this.totalPrice += item.price;
        }
      }
    }
  }
});

在上述示例中，我们添加了一个`selectAll`属性来表示是否全选。当点击全选复选框时，我们通过`toggleSelectAll`方法来更新所有商品的选中状态，并重新计算总价。

通过`updateTotalPrice`方法，我们遍历购物车中的商品，如果商品被选中，就将其价格累加到`totalPrice`属性中。

希望这个示例对你有所帮助！如有任何疑问，请随时提问。