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 30 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue 数据操作相关总结
Dec 17 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
vue路由实现登录拦截
Mar 24 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue 自定义组件添加原生事件
Apr 21 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+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python实现绘制树枝简单示例
2014/07/24 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
Python能做什么
2020/06/02 Python
Python如何输出百分比
2020/07/31 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
一套带答案的C++笔试题
2014/01/10 面试题
UML设计模式笔试题
2014/06/07 面试题
财务管理职业生涯规划范文
2013/12/27 职场文书
网页美工求职信
2014/02/15 职场文书
《商鞅南门立木》教学反思
2014/02/16 职场文书
先进个人自荐书
2015/03/06 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python