使用vue实现购物车功能,商品横向摆放，当商品数量为0时移出购物车

实现购物车功能，可以按以下步骤进行：

1. 创建一个包含商品信息的数组，其中每个商品对象包含id、名称、价格、数量等属性。
2. 在Vue中使用v-for指令遍历数组中的商品对象，并使用flex布局将商品横向排列。
3. 在购物车页面，可以使用computed属性计算出购物车中所有商品的总价和总数量。
4. 在每个商品对象中添加一个购物车状态的属性，例如isInCart，初始为false。点击加入购物车按钮时，将该属性设置为true，并将商品对象添加到购物车数组中；点击移出购物车按钮时，将该属性设置为false，并从购物车数组中移除该商品对象。
5. 在v-for指令中添加一个v-if条件，判断商品的数量是否为0，若为0则不显示该商品。

下面是一个示例代码：

HTML:

<div id="app">
  <div class="product-list">
    <div v-for="product in productList" :key="product.id" class="product-card">
      <img :src="product.image" alt="">
      <div class="info">
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>
        <div class="price">{{ product.price }}</div>
        <div class="quantity">
          <button @click="decreaseQuantity(product)">-</button>
          <span>{{ product.quantity }}</span>
          <button @click="increaseQuantity(product)">+</button>
        </div>
        <button @click="addToCart(product)" v-if="!product.isInCart">加入购物车</button>
        <button @click="removeFromCart(product)" v-else>移出购物车</button>
      </div>
    </div>
  </div>
  <div class="cart">
    <h2>购物车</h2>
    <div v-for="product in cart" :key="product.id" class="cart-item">
      <div class="cart-info">
        <h3>{{ product.name }}</h3>
        <div class="cart-price">{{ product.price }}</div>
        <div class="cart-quantity">{{ product.quantity }}</div>
      </div>
    </div>
    <div class="cart-total">
      <div>总价: {{ totalPrice }}</div>
      <div>总数量: {{ totalQuantity }}</div>
    </div>
  </div>
</div>

CSS:

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.product-card {
  width: 300px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-card img {
  width: 100%;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.price {
  font-size: 24px;
  font-weight: bold;
}

.quantity {
  display: flex;
  align-items: center;
}

.cart {
  margin-top: 50px;
}

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.cart-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.cart-price {
  font-size: 24px;
  font-weight: bold;
}

.cart-quantity {
  font-size: 18px;
  font-weight: bold;
}

JS:

new Vue({
  el: '#app',
  data: {
    productList: [
      {
        id: 1,
        name: '商品1',
        description: '这是商品1的描述',
        price: 100,
        image: 'https://via.placeholder.com/300x200',
        quantity: 0,
        isInCart: false,
      },
      {
        id: 2,
        name: '商品2',
        description: '这是商品2的描述',
        price: 200,
        image: 'https://via.placeholder.com/300x200',
        quantity: 0,
        isInCart: false,
      },
      {
        id: 3,
        name: '商品3',
        description: '这是商品3的描述',
        price: 300,
        image: 'https://via.placeholder.com/300x200',
        quantity: 0,
        isInCart: false,
      },
    ],
    cart: [],
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, product) => total + product.price * product.quantity, 0);
    },
    totalQuantity() {
      return this.cart.reduce((total, product) => total + product.quantity, 0);
    },
  },
  methods: {
    increaseQuantity(product) {
      product.quantity += 1;
    },
    decreaseQuantity(product) {
      if (product.quantity > 0) {
        product.quantity -= 1;
      }
    },
    addToCart(product) {
      product.isInCart = true;
      this.cart.push(product);
    },
    removeFromCart(product) {
      product.isInCart = false;
      const index = this.cart.indexOf(product);
      this.cart.splice(index, 1);
    },
  },
});

在这个示例中，我们使用了一个productList数组来存储所有的商品信息，使用v-for指令遍历数组中的商品对象，并使用flex布局将商品横向排列。每个商品对象都有一个quantity属性来记录该商品的数量，以及一个isInCart属性来记录该商品是否在购物车中。点击加入购物车按钮时，将该商品的isInCart属性设置为true，并将该商品对象添加到cart数组中；点击移出购物车按钮时，将该商品的isInCart属性设置为false，并从cart数组中移除该商品对象。在v-for指令中添加一个v-if条件，判断商品的数量是否为0，若为0则不显示该商品。在购物车页面中，使用computed属性计算出购物车中所有商品的总价和总数量，并显示在页面中。