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组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
解读Vue组件注册方式
May 15 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 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
咖啡与水的关系
2021/03/03 冲泡冲煮
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
javascript利用初始化数据装配模版的实现代码
2010/11/17 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
2011/08/23 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
一个JavaScript函数把URL参数解析成Json对象
2014/09/24 Javascript
JavaScript运行机制之事件循环(Event Loop)详解
2014/10/10 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python dict如何定义
2020/09/02 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
授权委托书怎么写
2014/04/03 职场文书
《池塘边的叫声》教学反思
2014/04/12 职场文书
领导干部作风整顿个人剖析材料
2014/10/11 职场文书
英镑符号 £
2022/02/17 杂记