vue--制作购物车

🤔如何制作出下列效果呢？👇

😶‍🌫️首先:

设置css样式：

javascript"> <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事件绑定设置+、- 数量

javascript"> <!-- 提示：可以使用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 = "decreaseQuantity(index)">-</button><span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</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、🧐定义属性：

javascript">  // 1.定义属性：存储商品的（响应式）数组 const cartItems = reactive([{ name: '苹果', quantity: 1, unit_price: 1 },{ name: '香蕉', quantity: 1, unit_price: 1 },{ name: '菠萝', quantity: 1, unit_price: 1 },

3、🧐定义方法--增减数量

javascript"> // 2.定义方法：增加商品数const increaseQuantity = (index) => {cartItems[index].quantity += 1;  }// 3.定义方法：减少商品数const decreaseQuantity = (index) => {if(cartItems[index].quantity > 1){cartItems[index].quantity -= 1;}}

4、🧐定义商品数量：

javascript">const totalItems = computed(() => {let total_items = 0;for(const item of cartItems){total_items += item.quantity;}return total_items})

😲最后返回函数：

javascript">  // 6.暴露属性和方法return {cartItems, increaseQuantity,decreaseQuantity,totalItems};},}).mount('#app');</script>

完整代码：👇

javascript"> <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}} &nbsp;&nbsp;</span><button v-on:click = "decreaseQuantity(index)">-</button><span class="quantity">{{ cartItems[index].quantity }}&nbsp;&nbsp;</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>