Vue组件简易模拟实现购物车


Posted in Vue.js onDecember 21, 2020

本文实例为大家分享了Vue组件模拟实现购物车的具体代码,供大家参考,具体内容如下

Vue组件简易模拟实现购物车

代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="./lib/vue-2.4.0.js"></script>
 <style>
  #app{
   width:600px;
  }

  #myTable{
   width:500px;
   border-collapse:collapse;
  }

  td, th{
   text-align: center;
   font-size:20px;
   border:2px solid black;
  }

  td{
   height: 40px;
  }

  input{
   width: 30px;
   text-align: center   
  }

 </style>
</head>
<body>

 <div id="app">
  <my-cart></my-cart>
 </div>

 <script>
  var MyCommmodity = {
   props: ["list"],
   template:`
    <div>
     <button @click="baicai">白菜</button>
     <button @click="qingcai">青菜</button>
     <button @click="luobo">萝卜</button> 
    </div>
   `,
   methods: {
    baicai: function(){
     var cai = {};
     cai.id = 4;
     cai.name = "白菜"
     cai.price = 3;
     cai.num = 1;
     this.list.push(cai)
    },
    qingcai: function(){
     var cai = {};
     cai.id = 5;
     cai.name = "青菜"
     cai.price = 6;
     cai.num = 1;
     this.list.push(cai)
    },
    luobo: function(){
     var cai = {};
     cai.id = 6;
     cai.name = "萝卜"
     cai.price = 8;
     cai.num = 1;
     this.list.push(cai)
    }
   }
  }

  var MyTable = {
   props: ["list", "flag"],
   template:`
    <table id="myTable">
    <tr>
     <th>编号</th>
     <th>名称</th>
     <th>单价</th>
     <th>数量</th>
     <th>操作</th>
    </tr>
    <tr :key="item.id" v-for="item in list"> 
     <td>{{item.id}}</td>
     <td>{{item.name}}</td>
     <td>{{item.price}}</td>
     <td>
      <button :disabled="flag" @click="sub(item.id)">-</button>
      <input type="text" :value="item.num" @blur="changeNum(item.id,$event)">
      <button @click="add(item.id)">+</button>
     </td>
     <td>
      <button @click="del(item.id)">删除</button>
     </td>
    </tr>
   </table>
   `,
   methods: {
    changeNum: function(id, event){
     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"
     })
    },    
    del: function(id){
     // alert(id);
     this.$emit("del-cart",id)
    }
   }
  }

  var MyPrice = {
   props: ["list"],
   template:`
    <div>
     <span>结算:</span>
     <span>{{total}}</span>     
    </div>
   `,
   computed: {
    total: function(){
     var t = 0;
     this.list.forEach(item => {
      t += item.price * item.num;
     });
     return t;
    }
   }
  }

  Vue.component('my-cart', {
   data () {
    return {
     flag:false,
     list:[{
      id: 1,
      name: "猪",
      price: "10",
      num:1,
     },
     {
      id: 2,
      name: "牛",
      price: "11",
      num:1,
     },
     {
      id: 3,
      name: "鸡",
      price: "13",
      num:1,
     }]
    }
   },
   template:`
    <div> 
     <my-commmodity :list="list"></my-commmodity> 
     <my-table :list="list" :flag="flag" @change-num="changeNum($event)" @del-cart="delCart($event)"></my-table>
     <my-price :list="list"></my-price>
        
    </div>
   `,
   components:{ 
    'my-table':MyTable,
    'my-price':MyPrice,
    'my-commmodity':MyCommmodity,
   },
   methods:{
    changeNum: function(val){
     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 >0){
        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){
     var index = this.list.findIndex(item=>{
      return item.id == id;
     })
     this.list.splice(index,1)
    }
   }
  })


 var vm = new Vue({
  el: '#app',
  data:{
  }
 })
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
在vue项目中封装echarts的步骤
Dec 25 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue实现购物车的小练习
Dec 21 #Vue.js
Vue实现小购物车功能
Dec 21 #Vue.js
vue监听滚动事件的方法
Dec 21 #Vue.js
vue el-upload上传文件的示例代码
Dec 21 #Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 #Vue.js
vue中如何添加百度统计代码
Dec 19 #Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 #Vue.js
You might like
PHP的SQL注入过程分析
2012/01/06 PHP
PHP函数超时处理方法
2016/02/14 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
JavaScript中的事件处理
2008/01/16 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
NodeJS安装图文教程
2018/04/19 NodeJs
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
python使用urllib2提交http post请求的方法
2015/05/26 Python
python黑魔法之参数传递
2016/02/12 Python
Python模块文件结构代码详解
2018/02/03 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
python如何查看微信消息撤回
2018/11/27 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
Python用SSH连接到网络设备
2021/02/18 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
经济系大学生求职信
2013/10/01 职场文书
党日活动总结
2014/05/07 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
手把手带你彻底卸载MySQL数据库
2022/06/14 MySQL