vue中购物车的案例

‘点击加’增加购物数量，同时’总价’也会改变;点击删除会删除该一行的商品

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="../font.css"/><!--font.css样式--><script type="text/javascript" src="../js/vue.js"></script><!--一定要导入vue.js--></head><body><div id="app"><div class="container"><my-cart></my-cart></div></div><script type="text/javascript">var CartTitle = { //局部组件props: ['uname'],template: `<h3 class="title">{{uname}}的购物车</h3>`}var CartList = { //局部组件,使用v-for时,切记不要将其放在跟节点中props : ['list'],template: `    <div><div :key='item.id' v-for='item in list' class="item"  ><div class="name">{{item.name}}</div><div class="change"><span  class="iconfont icon-jian" @click.prevent='sub(item.id)'></span><input type="text" class="num" style="width:90px;height:20px" :value='item.num' @blur='changeNum(item.id,$event)'/><span class="iconfont icon-jia"  @click.prevent='add(item.id)'></span><span class="del iconfont icon-shanchu" @click='del(item.id)' ></span></div></div></div>`,methods:{del:function(id){//通过父组件进行操作//    console.log(id)//把id传递给父组件this.$emit('cart-del',id);},changeNum:function(id,event){//console.log(id,event.target.value)this.$emit('change-num',{id:id,type:'change',num:event.target.value})},sub:function(id){this.$emit('change-num',{id:id,type:'sub'})},add:function(id){this.$emit('change-num',{id:id,type:'add'})}}}var CartTotal = { //局部组件props: ['list'],template: `<div class="total"><h4>总价：{{total}}</h4><button >结算</button></div>`,computed: {total: function() {//计算商品的总价var t = 0;this.list.forEach(item => {t += item.price * item.num;});return t;}}}Vue.component('my-cart', {data: function() {return {uname: '张三',list: [{id: 1,name: '苹果',price: 1100,num: 1}, {id: 2,name: 'vivo',price: 1100,num: 1}, {id: 3,name: '小米',price: 1300,num: 1}]}},template: `<div class="cart"><cart-title :uname=uname></cart-title><cart-list :list='list' @cart-del="delCart($event)" @change-num='changeNum($event)'></cart-list><cart-total :list='list'></cart-total></div>`,components: {'cart-title': CartTitle,'cart-list': CartList,'cart-total': CartTotal},methods:{changeNum:function(val){// console.log(val)  //根据子组件传递过来的数据,更新list中对应的数据//分三种情况,输入域变更,加号变更,减号变更if(val.type=="change"){this.list.some(item=>{if(item.id==val.id){item.num=val.num;//终止遍历return true;//表示终止遍历}});}else if(val.type=='sub'){this.list.some(item=>{if(item.id==val.id){item.num-=1;//终止遍历return true;//表示终止遍历}});}else if(val.type=='add'){this.list.some(item=>{if(item.id==val.id){item.num+=1;//终止遍历return true;//表示终止遍历}});}},delCart:function(id){//根据id删除list中对应的数据//1.找到id所对应的索引var index=this.list.findIndex(item=>{return item.id==id;})//2.根据索引删除对应数据this.list.splice(index,1);},handle:function(e){alert(e)}}})var vm = new Vue({el: '#app',data: {},methods:{}})</script></body>
</html>

font.css代码

@font-face {font-family: "iconfont";src: url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.eot?t=1593417631731'); /* IE9 */src: url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.eot?t=1593417631731#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP4AAsAAAAACVgAAAOrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqGAIRXATYCJAMUCwwABCAFhG0HRhvZBxEVnAHJfizYthBePxAroUV6JnjA76yXSQZ1utLZ+AXg6R7E7y7OeQJjoi5Hcvbk0RdSHmU5JUDA3MEx06VvYHlrG9mMoooq2qbjAQ0o8rto9KCP//T2YP7D2E3kQd4PAXjJoCCiZu2GLXFQgF0CEAP79emGkzCiKvACR2MVnKsQczFxjGnGTWCO9/PiK8WFAwamBBxs2rtWT6p+iPvgyrHRsXSkCETD2QHlIpBAQUCB6F/o7IkMIgWReK1URVnAgXYDhor1+OBGoyLqoXgrSkcUbeEfT2KAsABKP4+tGlXwIQ6zIeBDD2GR6iGvR/Iql49iANf0W/ACscBXEFkGpgcHiQqmWz4RAC6htR/p/Yp84oiHD1t6p28du83nU65bK3Als43p27Jj3Pbc3kik5ZoHM+6l9918PsMMqZVnvX7RZsaOVLl8+/StGPV5Ma5CjsMlGcuOMGLTtmRr6dacevP2FHvFjjwj9MWHWa11bq3wlcwc9vpIW/90+sCMSfrWTN6dl0gvsGOdmBEHT6apVadKhY6cyWKuPl16cMh1W6ntfJFgJNLazMxsF1gUz8I4/+IEsSRrj/4N6dNTNfwctz3v8viSYRq07PV76+uWPUVDXaTotnzbij6TDXv33LUvd/MmzXOXvd61maNzaKd60hYqDwt3kAmqfbb+8QlxHdbqAXEJ8e2zt4+htzyof7b2KkF2CFN2QtWhP2xt/xiqvQXFqKqz1qhhaINoswYVT16cDYbTwkE6gA4TgTPtLxoLeOVefVOcFTf1WW/BmSZna4h27USNs4jHJmqIRMVLd+pab1nvWip+fjnRBfK6HPDb/A0ll72e2SVU8b/jUwA8zXJ2jVcVHauQY+HdixqLfhJRwyFlS4DJVGYrFpq5Jm1w4EbLvdACP0cCYngxjDq+MR6EOj4CA5t0kDjkRCpsQTDxURIsHKqAlwLUudhHLMORCOUB8jOJA4FmDxgEOQMSzS2kwj4HkwS+g4UWEhA7r2KvuXfI72oQCkYN8g9eda1BFt75+Te07yQoLvEIL6TR+6HMinT8ii3SECeMH1sxGzDUNXDhHoYpddBTF1Bx5pj7Os9N0ZEy1TWTnSOCBIY0IP0BT+m0DJ3Odpnvv0HWWyJQRVuL8wWRkZ8flDJFA+RV2TZqu5SPjD6sCmMGMEinAS6cHSUY6YC+eF2AFJZxHUK9Wi6MM02V2fTq5h7PAF7gBWaGkEIJU1isd6JV7r3o70U7J4ql7ygnEwA=') format('woff2'),url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.woff?t=1593417631731') format('woff'),url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.ttf?t=1593417631731') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('//at.alicdn.com/t/font_1886857_9ox2cu4fn2k.svg?t=1593417631731#iconfont') format('svg'); /* iOS 4.1- */
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-shanchu:before {content: "\e614";
}.icon-jian:before {content: "\e6d5";
}.icon-jia:before {content: "\e6d4";
}.icon-jian1:before {content: "\e663";
}

该案例只实现了增加数量，减少数量和删除该商品

vue中购物车的案例相关推荐

vue中echarts使用案例：饼图（可直接使用）
目录功能.效果图: 代码实现 1.下载echarts包:终端运行 2.代码 3.运行项目:终端运行 4.可能遇到的错误具体代码详解: 功能.效果图: 1.点击对应模块,放大并显示数据 2.点击下方 ...
Vue中v-model的使用及案例
文章目录 1. 概述 2. 使用方法 3. 案例 3.1 案例:用户登录 3.2 案例:todolist 3.3 案例:实现单个复选框 3.4 案例:实现多个复选框 3.5 案例:实现复选框全选 3. ...
vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发
文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
html中购物车小球飞入的效果,vue项目中css3实现加入购物车小球抛物线飞入动画效果...
学习Vue中在做移动端商城练习项目时,记录css3实现加入购物车抛物线小球飞入动画效果.下面会介绍我在项目中实现抛物运动的简单方法. 知识点:css3动画(抛物线运动).vue动态绑定事件(控制小球出 ...
【Vue】Vue中传值的几种方法，案例代码解析
目录一.反向传值(子组件传值给父组件) 二.$refs 三.$parent 四.$children 五.$attrs/$listeners -----多层传值六.$root ----根组件七.依 ...
01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)
01- vue是什么: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
Vue中使用form表单提交刷新问题
vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了 &l ...
vue中的倒计时跳转页面问题和axios网络请求this作用域问题
一.前言这两个是在日常开发中碰到的问题,网上都能查得到答案,但是我怕自己会忘记,姑且记录一下用作笔记吧. 二.vue倒计时跳转问题 1.案例比如我们在一次网络请求结束之后,如果返回结果是成功,则倒 ...

vue中购物车的案例

vue中购物车的案例相关推荐

最新文章

热门文章