利用vue搭建商品列表并应用计算属性统计购物车中的商品总价程序

好的，下面是一个简单的利用Vue搭建商品列表并应用计算属性统计购物车中的商品总价的程序：

HTML代码：

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

JavaScript代码：

var app = new Vue({
  el: '#app',
  data: {
    products: [
      { id: 1, name: '商品1', price: 10 },
      { id: 2, name: '商品2', price: 20 },
      { id: 3, name: '商品3', price: 30 }
    ],
    cartItems: []
  },
  methods: {
    addToCart: function(item) {
      var cartItem = this.cartItems.find(function(cartItem) {
        return cartItem.id === item.id;
      });
      if (cartItem) {
        cartItem.quantity++;
      } else {
        this.cartItems.push({
          id: item.id,
          name: item.name,
          price: item.price,
          quantity: 1
        });
      }
    },
    removeFromCart: function(item) {
      var index = this.cartItems.indexOf(item);
      this.cartItems.splice(index, 1);
    }
  },
  computed: {
    totalPrice: function() {
      var total = 0;
      this.cartItems.forEach(function(item) {
        total += item.price * item.quantity;
      });
      return total;
    }
  }
});

解释：

1. 首先定义了一个Vue实例，将其挂载到id为`app`的DOM元素上。

2. 在Vue实例的data属性中定义了两个数组变量：`products`表示商品列表，`cartItems`表示购物车中的商品。

3. 在Vue实例的methods属性中定义了两个方法：`addToCart`用于将商品加入购物车中，`removeFromCart`用于将商品从购物车中移除。

4. 在Vue实例的computed属性中定义了一个计算属性`totalPrice`，用于计算购物车中的商品总价。

5. 在HTML中，使用Vue的指令`v-for`展示商品列表和购物车中的商品，使用Vue的指令`v-on`绑定点击事件。

6. 在HTML中，使用Vue的插值语法`{{}}`展示商品名称、商品价格、商品数量和商品总价。

这个程序可以实现一个简单的购物车功能，你可以根据自己的需求进行改进。