当前位置：首页 > news >正文

Vue框架开发一个简单的购物车（Vue.js）

news 2025/7/9 4:50:36

让我们利用所学知识来开发一个简单的购物车

（记得暴露属性和方法！！！）

首先来看一下最基本的一个html框架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实战小项目:购物车</title><style>body {font-family: Arial, sans-serif;}.cart-item {width: 50%;margin-bottom: 15px;padding: 10px;border: 2px solid gray;border-radius: 10px;background-color: #ddd;}.buttons {margin-top: 5px;}.buttons button {padding: 5px 10px;margin-right: 5px;font-size: 16px;cursor: pointer;border: none;border-radius: 3px;background-color: pink;}.buttons input {width: 25px;}.buttons button:hover {background-color: yellow;}.quantity {font-size: 18px;font-weight: bold;margin-left: 10px;}h1, h2 {color: #333;}</style>
</head>
<body><div id="app"><h1>实战小项目:购物车</h1><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item"><div class="buttons"><span>苹果 &nbsp;&nbsp;</span><button>-</button><span class="quantity">1&nbsp;&nbsp;</span><button>+</button><p>请输入价格：<input type="text"/> 元/斤 <br> 单价：1 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数:  <ins> 1 </ins> 件</h3><h3>商品总价:  <ins> 1 </ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 // 2.定义方法：增加商品数// 3.定义方法：减少商品数// 4.定义方法：计算商品总数// 5.定义方法：计算商品总价// 6.暴露属性和方法}}).mount('#app');</script>
</body>
</html>

效果如下：

目前是一个静态的一个网页

首先定义属性：存储商品的（响应式）数组（使用v-for遍历）

  <div class="cart-item" v-for="(item,index) in cartItems">const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },]);

我们可以发现我们已经做出了三个链接，但是名字都是苹果，这个时候我们添加一个插值即可

<span>{{item.name}}&nbsp;&nbsp;</span>

那么我们如何控制商品的增加和减少呢

我们只需要定义一个函数并且使用v-on的方法绑定即可，事件触发为点击

注意：在做减少按钮时，我们要通过if判断限制一下商品数，否则会出现负数

 <button v-on:click = "pre(index)">-</button><span class="quantity">{{cartItems[index].quantity}} &nbsp;&nbsp;</span><button v-on:click = "next(index)">+</button>// 2.定义方法：增加商品数const next = (index) =>{cartItems[index].quantity ++;}                             // 3.定义方法：减少商品数const pre = (index) => {if ( cartItems[index].quantity>1) {cartItems[index].quantity --;}}

接着我们要计算商品的总数，那么该如何计算呢

可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价

   <h3>商品总数:  <ins> {{totalItem()}} </ins> 件</h3>// 4.定义方法：计算商品总数const totalItem = () =>{let total_items = 0 ;for(const item of cartItems){total_items +=item.quantity;}return total_items}

计算完总数，我们就该来计算总价了，同理可得使用computer计算属性，定义一个变量，在函数里面写一个for遍历即可（输入框里面属于写一个双向绑定v-model从而实现单价变化总价随着变化）

        <input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> <h3>商品总价:  <ins> {{totalprice}} </ins> 元</h3>// 5.定义方法：计算商品总价const totalprice = computed(()=>{let total_price = 0;  for(const money of cartItems){  total_price += money.unit_price*money.quantity;  }return total_price  })

这样我们一个简单的购物车便开发成功啦

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实战小项目:购物车</title><style>body {font-family: Arial, sans-serif;}.cart-item {width: 50%;margin-bottom: 15px;padding: 10px;border: 2px solid gray;border-radius: 10px;background-color: #ddd;}.buttons {margin-top: 5px;}.buttons button {padding: 5px 10px;margin-right: 5px;font-size: 16px;cursor: pointer;border: none;border-radius: 3px;background-color: pink;}.buttons input {width: 25px;}.buttons button:hover {background-color: yellow;}.quantity {font-size: 18px;font-weight: bold;margin-left: 10px;}h1, h2 {color: #333;}</style>
</head>
<body><div id="app"><h1>实战小项目:购物车</h1><!-- 提示：可以使用v-for指令，假设有n个品类，则生成n个商品项--><div class="cart-item" v-for="(item,index) in cartItems"><div class="buttons"><span>{{item.name}}&nbsp;&nbsp;</span><button v-on:click = "pre(index)">-</button><span class="quantity">{{cartItems[index].quantity}} &nbsp;&nbsp;</span><button v-on:click = "next(index)">+</button><p>请输入价格：<input type="text" v-model="cartItems[index].unit_price"> 元/斤 <br> 单价：1 元/斤</p></div></div><!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价--><h3>商品总数:  <ins> {{totalItem()}} </ins> 件</h3><h3>商品总价:  <ins> {{totalprice}}</ins> 元</h3></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {// 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },]);// 2.定义方法：增加商品数const next = (index) =>{cartItems[index].quantity ++;}                             // 3.定义方法：减少商品数const pre = (index) => {if ( cartItems[index].quantity>1) {cartItems[index].quantity --;}}// 4.定义方法：计算商品总数const totalItem = () =>{let total_items = 0 ;for(const item of cartItems){total_items +=item.quantity;}return total_items}// 5.定义方法：计算商品总价const totalprice = computed(()=>{let total_price = 0; for(const money of cartItems){  total_price += money.unit_price*money.quantity;  }return total_price   })// 6.暴露属性和方法return {cartItems,pre,next,totalItem,totalprice,};},}).mount('#app');</script>
</body>
</html>