网站模板安装步骤,搞钱的路子网站,深圳公布最新出行政策,网站公司 模板让我们利用所学知识来开发一个简单的购物车
#xff08;记得暴露属性和方法#xff01;#xff01;#xff01;#xff09;
首先来看一下最基本的一个html框架
!DOCTYPE html
html langen
headmeta charsetUTF-8记得暴露属性和方法
首先来看一下最基本的一个html框架
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title实战小项目:购物车/titlestylebody {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
bodydiv idapph1实战小项目:购物车/h1!-- 提示可以使用v-for指令假设有n个品类则生成n个商品项--div classcart-itemdiv classbuttonsspan苹果 nbsp;nbsp;/spanbutton-/buttonspan classquantity1nbsp;nbsp;/spanbutton/buttonp请输入价格input typetext/ 元/斤 br 单价1 元/斤/p/div/div!-- 提示可以用计算属性或数据变动侦听器跟踪商品数和单价的变化进而求出总数和总价--h3商品总数: ins 1 /ins 件/h3h3商品总价: ins 1 /ins 元/h3/divscript typemoduleimport { createApp, reactive, computed } from ./vue.esm-browser.jscreateApp({setup() {// 1.定义属性存储商品的响应式数组 // 2.定义方法增加商品数// 3.定义方法减少商品数// 4.定义方法计算商品总数// 5.定义方法计算商品总价// 6.暴露属性和方法}}).mount(#app);/script
/body
/html
效果如下 目前是一个静态的一个网页
首先定义属性存储商品的响应式数组使用v-for遍历 div classcart-item v-for(item,index) in cartItemsconst 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)-/buttonspan classquantity{{cartItems[index].quantity}} nbsp;nbsp;/spanbutton v-on:click next(index)/button// 2.定义方法增加商品数const next (index) {cartItems[index].quantity ;} // 3.定义方法减少商品数const pre (index) {if ( cartItems[index].quantity1) {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 typetext v-modelcartItems[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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title实战小项目:购物车/titlestylebody {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
bodydiv idapph1实战小项目:购物车/h1!-- 提示可以使用v-for指令假设有n个品类则生成n个商品项--div classcart-item v-for(item,index) in cartItemsdiv classbuttonsspan{{item.name}}nbsp;nbsp;/spanbutton v-on:click pre(index)-/buttonspan classquantity{{cartItems[index].quantity}} nbsp;nbsp;/spanbutton v-on:click next(index)/buttonp请输入价格input typetext v-modelcartItems[index].unit_price 元/斤 br 单价1 元/斤/p/div/div!-- 提示可以用计算属性或数据变动侦听器跟踪商品数和单价的变化进而求出总数和总价--h3商品总数: ins {{totalItem()}} /ins 件/h3h3商品总价: ins {{totalprice}}/ins 元/h3/divscript typemoduleimport { createApp, reactive, computed } from ./vue.esm-browser.jscreateApp({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].quantity1) {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
