网站空间合同,登录网站定制,新开传奇新服,关于网站建设投稿目录
购物车效果展示#xff1a;
购物车代码#xff1a; 购物车效果展示#xff1a; 此项目添加、修改、删除数据的地方都写了浏览器都会把它存储起来 下次运行项目时会把浏览器数据拿出来并在页面展示 Video_20230816145047 购物车代码#xff1a; 复制完代码#xff0…目录
购物车效果展示
购物车代码 购物车效果展示 此项目添加、修改、删除数据的地方都写了浏览器都会把它存储起来 下次运行项目时会把浏览器数据拿出来并在页面展示 Video_20230816145047 购物车代码 复制完代码需改下script中引入的vue文件地址可直接使用 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idappdivform action 商品名称:input typetext v-modelproductName nameproductName商品单价:input typetext v-modelproductPrice nameproductPriceinput typebutton value添加商品 clickaddProduct/form/divulli v-for(pro,index) in productList :keyindex商品名称{{pro.productName}}商品单价{{pro.productPrice}}nbsp;nbsp;nbsp;button typebutton clickaddProToCart(index)添加到购物车/buttonbutton typebutton clickdeleteProToCart(index)删除此商品/button/li/ulcart :cartlistcartList/cart/divtemplate idcartHtmldivtable border1trtd全选input typecheckbox changecheckActive idisCheck/tdtd商品名称/tdtd商品单价/tdtd商品数量/tdtd商品价格/td/trtr v-for(pro,index) in cartlist :keyindextdinput typecheckbox v-modelpro.active changeziCheck/tdtd{{pro.productName}}/tdtd{{pro.productPrice}}/tdtdbutton typebutton clickreduceProNum(index)-/button{{pro.productNum}}button typebutton clickaddProNum(index)/button/tdtd{{pro.productPrice*pro.productNum}}/td/trtrtd colspan3选中的商品{{activeNum}}/{{cartlist.length}}/tdtd colspan2总价格{{totalPrice}}/td/tr/table/div/template/body
script src../js/vue2.7.js/script!--根据自己的vue文件地址填写--
script//创建一个购物车子组件var cart{template:#cartHtml,props:[cartlist],methods:{addProNum(index){let product this.cartlist[index];product.productNumlocalStorage.setItem(cartList, JSON.stringify(this.cartlist));},reduceProNum(index){let product this.cartlist[index];//判断商品数量是否为一if (product.productNum1) {this.cartlist.splice(index,1)//为一在数组中删除掉//删除完后把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem(cartList, JSON.stringify(this.cartlist));}else{product.productNum--//减完之后把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem(cartList, JSON.stringify(this.cartlist));}},checkActive(){if(document.getElementById(isCheck).checked){for(var i0;ithis.cartlist.length;i){this.cartlist[i].activetrue;}//全选为true后把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem(cartList, JSON.stringify(this.cartlist));}else{for(var i0;ithis.cartlist.length;i){this.cartlist[i].activefalse;}//全选为false后把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem(cartList, JSON.stringify(this.cartlist));}},ziCheck(){//当多选框变化时把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem(cartList, JSON.stringify(this.cartlist));},},computed:{//计算购物车商品总和activeNum(){let activeProductListthis.cartlist.filter(item{return item.active})return activeProductList.length;},//计算购物车商品的总价格totalPrice(){let result0;for(pro of this.cartlist){if(pro.active){resultresultpro.productPrice*pro.productNum}}return result}},updated() {//当多选框都为true全选后的多选框为truevar isActivethis.cartlist.every(c c.active)if (isActive) {document.getElementById(isCheck).checkedtrue} else {document.getElementById(isCheck).checkedfalse}},}let appnew Vue({el:#app,data() {return {productName:,productPrice:,productList:[],cartList:[]}},methods: {addProduct(){let isnameOktrue;let ispriceOktrue;if (this.productName) {isnameOkfalse}if(isNaN(this.productPrice) || this.productPrice0){ispriceOkfalse;}if(isnameOk ispriceOk){//查找新增的商品是否存在商品列表中如果不存在返回-1let findindexthis.productList.findIndex(item{return item.productNamethis.productName})//判断商品列表中是否存在新增的商品if(findindex-1){//把新商品添加到商品列表中this.productList.push({productName:this.productName,productPrice:this.productPrice})//把数据放在浏览器里面把key值设置为productListlocalStorage.setItem(productList, JSON.stringify(this.productList));//添加完表单中的输入框调为空this.productName;this.productPrice;}else{alert(此商品已经存在商品列表)//商品已存在给出提示}}else{alert(请输入合适的商品名称及单价)}},addProToCart(index){let newproductthis.productList[index];//根据下标从商品列表里面取出商品//从购物车列表中查找是否存在新的商品如果找到返回购物车的商品let product this.cartList.find(item{return item.productNamenewproduct.productName})if (product) {//如果有对应的商品则数量加一product.productNum}else{//没有对应的商品就添加商品到购物车this.cartList.push({productName:newproduct.productName,productPrice:newproduct.productPrice,productNum:1,active:true})//把数据放在浏览器里面把key值设置为cartListlocalStorage.setItem(cartList, JSON.stringify(this.cartList));}},deleteProToCart(index){let isOkconfirm(是否删除此商品)if(isOk){this.productList.splice(index,1)}//把数据放在浏览器里面把key值设置为productListlocalStorage.setItem(productList, JSON.stringify(this.productList));}},//生命周期钩子部署完后执行从浏览器中把数据拿出来mounted(){for(pro of JSON.parse(localStorage.getItem(productList))){this.productList.push({productName:pro.productName,productPrice:pro.productPrice});}for(pro of JSON.parse(localStorage.getItem(cartList))){this.cartList.push({productName:pro.productName,productPrice:pro.productPrice,productNum:pro.productNum,active:pro.active});}},components:{cart},})
/script
/html
