Vue.js 2 项目实战：水果购物车

<template>
  <div class="fruit-cart">
    <h1>水果购物车</h1>
    <ul>
      <li v-for="(fruit, index) in cart" :key="fruit.name">
        {{ fruit.name }} - {{ fruit.quantity }} 个 - 总价: ${{ fruit.price * fruit.quantity }}
        <button @click="removeFruit(index)">移除</button>
      </li>
    </ul>
    <p v-if="totalPrice === 0">购物车为空</p>
    <p v-else>总价: ${{ totalPrice }}</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      cart: [
        // 初始化购物车中的水果列表
      ]
    };
  },
  computed: {
    totalPrice() {
      let total = 0;
      for (let fruit of this.cart) {
        total += fruit.price * fruit.quantity;
      }
      return total.toFixed(2);
    }
  },
  methods: {
    removeFruit(index) {
      this.cart.splice(index, 1); // 移除指定索引的水果
    }
  }
};
</script>
 
<style scoped>
.fruit-cart {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
 
ul {
  list-style-type: none;
  padding: 0;
}
 
li {
  border-bottom: 1px solid #eee;
  padding: 15px 0;
  font-size: 16px;
}
 
button {
  background: #ff3860;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
}
</style>

这个简单的Vue.js 2项目实例展示了如何创建一个基本的水果购物车应用。它包括了购物车中水果的列表展示、单个水果的移除功能以及计算总价的计算属性。虽然这个例子很基础，但它展示了Vue.js中常用的概念，如响应式数据绑定、列表渲染、事件处理等，对于Vue.js开发者来说是一个很好的入门级教学资源。