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中音频wavesurfer.js的使用方法
Feb 20 Vue.js
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue+vant 上传图片需要注意的地方
Jan 03 Vue.js
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
Jan 05 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
php 数组元素快速去重
2017/05/05 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JS实现吸顶特效
2020/01/08 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
python 获取et和excel的版本号
2009/04/09 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python单例模式实例详解
2017/03/01 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
详解python算法之冒泡排序
2019/03/05 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
PyTorch加载自己的数据集实例详解
2020/03/18 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
2013/01/06 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
保密承诺书范文
2014/03/27 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
学生保证书
2015/01/16 职场文书
美容院员工规章制度
2015/08/05 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书