<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开发者来说是一个很好的入门级教学资源。