用vue写一个购物车功能代码
时间: 2024-02-19 14:48:57 浏览: 139
【JavaScript源代码】vue实现简单购物车案例.docx
好的,以下是一个简单的用Vue写的购物车功能的代码:
<template>
<div>
<h2>购物车</h2>
<ul>
<li v-for="item in cartItems">
<span>{{ item.name }}</span>
<button @click="decrement(item)">-</button>
<span>{{ item.quantity }}</span>
<button @click="increment(item)">+</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
cartItems: [
{id: 1, name: '商品1', quantity: 1},
{id: 2, name: '商品2', quantity: 3},
{id: 3, name: '商品3', quantity: 2},
]
}
},
methods: {
increment(item) {
item.quantity++
},
decrement(item) {
if (item.quantity > 1) {
item.quantity--
}
}
}
}
</script>
希望能够帮助到您!
阅读全文