Vue框架开辟一个简单的购物车（Vue.js）
让我们使用所学知识来开辟一个简单的购物车（记得暴露属性和方法！！！）
起首来看一下最基本的一个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>苹果 </span>
<button>-</button>
<span class="quantity">1 </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> 结果如下：
https://i-blog.csdnimg.cn/direct/da122641d3ad4bf6950531ceec824b4f.png
目前是一个静态的一个网页
起首界说属性：存储商品的（响应式）数组（使用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 },
]); https://i-blog.csdnimg.cn/direct/6561f056aa10490194bf74dd1aa9bf84.png
我们可以发现我们已经做出了三个链接，但是名字都是苹果，这个时候我们添加一个插值即可
<span>{{item.name}} </span> https://i-blog.csdnimg.cn/direct/6ebd73a775684986ab27b276424ce850.png
那么我们如何控制商品的增长和淘汰呢
我们只必要界说一个函数 而且使用v-on的方法绑定即可，事件触发为点击
留意：在做淘汰按钮时，我们要通过if判定限定一下商品数，否则会出现负数
<button v-on:click = "pre(index)">-</button>
<span class="quantity">{{cartItems.quantity}} </span>
<button v-on:click = "next(index)">+</button>
// 2.定义方法：增加商品数
const next = (index) =>{
cartItems.quantity ++;
}
// 3.定义方法：减少商品数
const pre = (index) => {
if ( cartItems.quantity>1) {
cartItems.quantity --;
}
} https://i-blog.csdnimg.cn/direct/ffceee12aa5d4622a5eb1c65121197ee.png
接着我们要计算商品的总数，那么该如何计算呢
可以用计算属性或数据变更侦听器，跟踪商品数和单价的变化，进而求出总数和总价
<h3>商品总数:<ins> {{totalItem()}} </ins> 件</h3>
// 4.定义方法：计算商品总数
const totalItem = () =>{
let total_items = 0 ;
for(const item of cartItems){
total_items +=item.quantity;
}
return total_items
}
https://i-blog.csdnimg.cn/direct/273de88485014629b0ad676be3d7ba55.png
计算完总数，我们就该来计算总价了，同理可得使用computer计算属性，界说一个变量，在函数内里写一个for遍历即可（输入框内里属于写一个双向绑定v-model从而实现单价变化总价随着变化）
<input type="text" v-model="cartItems.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
})
https://i-blog.csdnimg.cn/direct/240c05a8dbe44bc39abc952ba80452e4.png
如许我们一个简单的购物车便开辟成功啦
完备代码如下：
<!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}} </span> <button v-on:click = "pre(index)">-</button> <span class="quantity">{{cartItems.quantity}} </span> <button v-on:click = "next(index)">+</button> <p> 请输入价格： <input type="text" v-model="cartItems.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.quantity ++; } // 3.界说方法：淘汰商品数 const pre = (index) => { if ( cartItems.quantity>1) { cartItems.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> https://i-blog.csdnimg.cn/direct/dd06be8ca27546028f3e0d8e67e3e5d8.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]