在Vue.js中，購物車通常是一個組件，用于存儲用戶添加到購物車的商品。以下是一個簡單的Vue.js購物車實(shí)現(xiàn)：

1. 創(chuàng)建一個名為Cart的Vue組件，并添加一個data屬性來存儲購物車中的商品。

<template>
  <div class="cart">
    <h2>購物車</h2>
    <ul>
      <li v-for="item in cart" :key="item.id">
        {{ item.name }} - {{ item.price }}元
      </li>
    </ul>
    <button @click="addToCart">加入購物車</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cart: [],
    };
  },
  methods: {
    addToCart(product) {
      this.cart.push(product);
    },
  },
};
</script>

1. 接下來，創(chuàng)建一個名為Product的Vue組件，用于表示購物車中的商品。

<template>
  <div class="product">
    <h2>{{ name }}</h2>
    <p>{{ price }}</p>
  </div>
</template>

<script>
export default {
  props: ['name', 'price'],
};
</script>

1. 最后，在主應(yīng)用中使用這兩個組件。

<template>
  <div id="app">
    <Cart />
    <Product name="蘋果" price="5" />
    <Product name="香蕉" price="3" />
    <Product name="橙子" price="4" />
  </div>
</template>

<script>
import Cart from './components/Cart.vue';
import Product from './components/Product.vue';

export default {
  components: {
    Cart,
    Product,
  },
};
</script>

這個簡單的購物車實(shí)現(xiàn)包括一個購物車組件和一個商品組件。購物車組件顯示購物車中的商品，商品組件表示單個商品。當(dāng)點(diǎn)擊“加入購物車”按鈕時，會將商品添加到購物車中。