vue--制作购物车
🤔如何制作出下列效果呢？👇
😶🌫️首先:
设置css样式：
<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: 15px;
}
.buttons button:hover {
background-color: yellow;
}
.quantity {
font-size: 18px;
font-weight: bold;
margin-left: 10px;
}
h1, h2 {
color: #333;
}
</style>
</head>
<body>🤓接下来：
1、可以使用v-for指令，假设有n个品类，则生成n个商品项
2、使用下标指令遍历商品的名字和遍历商品的价格
3、v-on事件绑定设置+、- 数量
<!-- 提示：可以使用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 = "decreaseQuantity(index)">-</button>
<span class="quantity">{{ cartItems[index].quantity }} </span>
<button v-on:click = "increaseQuantity(index)">+</button>
<p>
请输入价格：
<input type="text" /> 元/斤 <br>
单价：
1 元/斤
</p>
</div>
</div>
<!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价-->
<h3>商品总数: <ins> {{totalItems}} </ins> 件</h3>
<h3>商品总价: <ins> 1 </ins> 元</h3>
</div>2、🧐定义属性：
// 1.定义属性：存储商品的（响应式）数组
const cartItems = reactive([
{ name: '苹果', quantity: 1, unit_price: 1 },
{ name: '香蕉', quantity: 1, unit_price: 1 },
{ name: '菠萝', quantity: 1, unit_price: 1 },3、🧐定义方法--增减数量
// 2.定义方法：增加商品数
const increaseQuantity = (index) => {
cartItems[index].quantity += 1;
}
// 3.定义方法：减少商品数
const decreaseQuantity = (index) => {
if(cartItems[index].quantity > 1){
cartItems[index].quantity -= 1;
}
}4、🧐定义商品数量：
const totalItems = computed(() =>
{
let total_items = 0;
for(const item of cartItems){
total_items += item.quantity;
}
return total_items
}
)😲最后返回函数：
// 6.暴露属性和方法
return {
cartItems,
increaseQuantity,decreaseQuantity,
totalItems
};
},
}).mount('#app');
</script>完整代码：👇
<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: 15px;
}
.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 = "decreaseQuantity(index)">-</button>
<span class="quantity">{{ cartItems[index].quantity }} </span>
<button v-on:click = "increaseQuantity(index)">+</button>
<p>
请输入价格：
<input type="text" /> 元/斤 <br>
单价：
1 元/斤
</p>
</div>
</div>
<!-- 提示：可以用计算属性或数据变动侦听器，跟踪商品数和单价的变化，进而求出总数和总价-->
<h3>商品总数: <ins> {{totalItems}} </ins> 件</h3>
<h3>商品总价: <ins> 1 </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 increaseQuantity = (index) => {
cartItems[index].quantity += 1;
}
// 3.定义方法：减少商品数
const decreaseQuantity = (index) => {
if(cartItems[index].quantity > 1){
cartItems[index].quantity -= 1;
}
}
// 4.定义方法：计算商品总数
const totalItems = computed(() =>
{
let total_items = 0;
for(const item of cartItems){
total_items += item.quantity;
}
return total_items
}
)
// 5.定义方法：计算商品总价
// 6.暴露属性和方法
return {
cartItems,
increaseQuantity,decreaseQuantity,
totalItems
};
},
}).mount('#app');
</script>
</body>
</html>