Vue实现购物车功能


Posted in Javascript onApril 27, 2017

效果图:

Vue实现购物车功能

代码如下:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="external nofollow" />
</head>
<body>

  <div id="app" class="container">
    <table class="table">
      <thead>
        <tr>
          <th>产品编号</th>
          <th>产品名字</th>
          <th>购买数量</th>
          <th>产品单价</th>
          <th>产品总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item , index) in message">
          <td @click="jia(index)">{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <button type="button" class="btn tn-primary" @click="subtract(index)">-</button>
            <input type="text" v-model="item.quantity">
            <button type="button" class="btn tn-primary" @click="add(index)">+</button>
          </td>
          <td>{{item.price | filtermoney}}</td>
          <!--<td>{{arr[index].one}}</td>-->
          <td>{{item.price*item.quantity | filtermoney}}</td>
          <td>
            <button type="button" class="btn btn-danger" @click="remove(index)">移除</button>
          </td>
        </tr>
        <tr>
          <td>总购买价  
          </td>
          <td>
            {{animatenum | filtermoney}}
          </td>
          <td>总购买数量
          </td>
          <td>

          </td>
          <td colspan="2">
            <button type="button" class="btn btn-danger" @click="empty()">清空购物车</button>
          </td>
        </tr>
      </tbody>
    </table>

    <p v-if="message.length===0">您的购物车为空</p>
  </div>
  <script src="https://unpkg.com/tween.js@16.3.4"></script>
  <script src="https://cdn.bootcss.com/vue/2.2.3/vue.min.js"></script>
  <script>
   var vm=new Vue({
   el:"#app",
   data:{
    totalPrice:0,
    animatenum:0,
    message:[
    {
        id: 007,
        name: 'iphone5s',
        quantity: 3,
        price: 4000
     },{
        id: 1340,
        name: 'iphone5',
        quantity: 9,
        price: 3000
     },{
        id: 7758,
        name: 'imac',
        quantity: 4,
        price: 7000
     },{
        id: 2017,
        name: 'ipad',
        quantity: 5,
        price: 6000
      }
    ]
   },
   watch:{
    toComput2:function(newValue,oldValue){
    this.tween(newValue,oldValue);
    }
   },
   computed:{
    //计算总金额
    toComput2:function(){
    var vm=this;
    //每次进来要重置总金额
    vm.totalPrice=0;
    this.message.forEach(function(mess){
     vm.totalPrice+=parseInt(mess.price*mess.quantity);
    })
    return this.totalPrice;
    }
   },
   filters:{
    filtermoney:function(value){
    return '¥'+value ;
    }
   },
   mounted:function(){ 
    this.tween('97000','0');
   },
   methods:{
    //计算总数的方法为什么写在methods里面就不行?
    toComput:function(){
    var vm=this;
    vm.message.forEach(function(mess){
     vm.totalPrice+=parseInt(mess.price*mess.quantity);
    })
   return vm.totalPrice;
    },
    add:function(index){
    var vm=this;
    vm.message[index].quantity++;
    },
    subtract:function(index){
    var vm=this;
    vm.message[index].quantity--;
    if(vm.message[index].quantity<=0){
     if (confirm("你确定移除该商品?")) { 
        vm.message.splice(index,1)
      } 
    }

    },
    remove:function(index){
    var vm=this;
    if (confirm("你确定移除该商品?")) { 
        vm.message.splice(index,1)
      } 
    },
    empty:function(){
    var vm=this;
    vm.message.splice(0,vm.message.length);
    },
    jia:function(index){
    var vm=this;
    vm.arr[index].one++;
    },
    tween:function(newValue,oldValue){
   var vm=this;
   var twen=new TWEEN.Tween({animatenum:oldValue});
   function animate() {
     requestAnimationFrame(animate);  
     TWEEN.update(); 
   };
   twen.to({animatenum:newValue},750);
   twen.onUpdate(function(){
   //toFixed();保留几位小数
   vm.animatenum = this.animatenum.toFixed();
   })
   twen.start();
   animate();
  }
   }
   });

  </script> 
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
JS组件Bootstrap Table使用方法详解
Feb 02 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 #Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 #Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
Apr 27 #Javascript
微信小程序 wx:for的使用实例详解
Apr 27 #Javascript
微信小程序 动态传参实例详解
Apr 27 #Javascript
微信小程序 本地数据读取实例
Apr 27 #Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 #Javascript
You might like
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
php结合md5实现的加密解密方法
2016/01/25 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
Js中setTimeout()和setInterval() 何时被调用执行的用法
2013/04/12 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python短信轰炸的代码
2020/03/25 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
学院书画协会部门岗位职责
2013/12/01 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
遗失说明具结保证书
2015/02/26 职场文书
运动会1000米加油稿
2015/07/21 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
一文带你探究MySQL中的NULL
2021/11/11 MySQL
python脚本框架webpy模板赋值实现
2021/11/20 Python
MySQL插入数据与查询数据
2022/03/25 MySQL
解决IDEA翻译插件Translation报错更新TTK失败不能使用
2022/04/24 Python