Vue实现购物车功能

2024-11-30 13:33:44

效果图：

代码如下：

<!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>

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

用vue和node写的简易购物车实现

项目介绍这是用vue写前端,用node来接收前端发来的请求,然后进行相应的数据操作,例如数据的存取和删除等.这是个人的练习项目,目前功能做的比较简单,主要是展示商品列表,把商品加入购物车,从购物车删除商品三个小功能. 搭建本地环境因为是用vue,需要用babel把es6语法转为es5语法. 1.配置.babelrc文件 { "presets": [ "es2015", "stage-2" ], "plugins": [&q
基于Vuejs实现购物车功能

本文实例为大家分享了Vuejs购物车实现代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的vue购物车</title> <link rel="stylesheet" href="css/bootstrap.min.css&q
Vue2.0实现购物车功能

简介 vue.js是由华人尤雨溪开发的一套MVVM框架.vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统,它非常适用于具有复杂交互逻辑的前端应用,如一些单页应用程序,有很多表单操作,页面中的内容需要根据用户的操作动态变化. 主要特性: 1.响应式的数据绑定 2.组件化开发 3.Virtual DOM 开发准备工具我使用的编辑器是sublime text3,首先要先安装个插件sublimeServer,用来搭建一个http服务器,使用详情请查看这篇博
Vuejs实现购物车功能

开始更新前端框架Vue.JS的相关博客. 功能概述学习了Vue.JS的一些基础知识,现在利用指令.数据绑定这些基础知识开发一个简单的购物车功能.功能要点如下: (1)展示商品的名称.单价和数量: (2)商品的数量可以增加和减少: (3)购物车的总价要实时更新,即数量发生变动,总价也要相应的改变: (4)商品可以从购物车中移除: (5)具有选择功能,只计算选中的商品的总价. 上一张截图,如下: 代码代码分成三部分,分别是HTML.JS.CSS.关键的是HTML和JS. HTML <!DOCTY
vuejs手把手教你写一个完整的购物车实例代码

由于我们公司是主营业务是海淘,所以每个项目都是类似淘宝天猫之类的商城,那么购物车就是一个重点开发功能模块.介于之前我都是用jq来写购物车的,这次就用vuejs来写一个购物车.下面我就从全选,数量控制器,运费,商品金额计算等方法来演示一下一个能用在实际场景的购物车是怎么做出来的以及记录一下这次用vuejs踩过的坑. 1.一层数据结构-全选下面这段代码和vuejs官网里面checkbox绑定很像.不明白的可以直接上vuejs官网看看. <!DOCTYPE html> <html lang=
vue实现购物车功能（商品分类）

本文实例为大家分享了vue实现购物车功能的具体代码,供大家参考,具体内容如下 new Vue({ el: "#app", data: { cIndex: 0, lists: [ { title: "推荐商品", goods: [ { id: 0, img: './images/goods.png', name: '散称樱桃1', price: '10.00', num: 0 }, { id: 1, img: './images/goods.png', name: '
vue实现购物车功能(亲测可用)

本文实例为大家分享了vue实现购物车功能的具体代码,供大家参考,具体内容如下如图,需要有加入购物车的标识思路如下:点击购物车按钮时将商品的id,title,imgUrl(海报图),flag(标识符,flag非常重要,为以后复选框判断是否选中做参考)变成一个数组形式,cart,传入vuex <template> <div> <van-goods-action> <van-goods-action-icon icon="chat-o&
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" /> &l
vue实现购物车全部功能的简单方法

主要功能如下: 增加商品信息修改商品信息删除单个商品删除多个商品清空购物车对商品单价进行降序排序根据商品名称实现查找实现商品数量加减全选反选实现勾选商品的总价计算效果图如下: 由于功能比较多就不一个个讲了,我们先来讲几个主要功能的逻辑(增删改查),最后放全放部代码首先我们先来看增加商品功能 //先来一个按钮绑定显示事件,点击添加后出现一个弹窗 <button type="button" @click="xian">添加</bu
vue实现商城购物车功能

本文实例为大家分享了vue实现商城购物车功能的具体代码,供大家参考,具体内容如下首先,先上最终的效果图效果并不是很好看,但是这不是重点. 首先,我们先看下布局: <template> <div class="shopcar" id="demo04"> <div class="header-title"> <h3>购物车</h3> </div> <div class=
vue实现的仿淘宝购物车功能详解

本文实例讲述了vue实现的仿淘宝购物车功能.分享给大家供大家参考,具体如下: 下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面首先简单介绍一下可能会用到的一些vue.js的用法: v-bind,绑定属性:例如v-bind:class="{'class1':flag}",这是常用的绑定样式的方法,如果flag为true则class=class1:v-bind:src="image",image就是图像的路径; v-if=&quo
Vue实现本地购物车功能

本文实例为大家分享了Vue实现本地购物车功能的具体代码,供大家参考,具体内容如下功能分析 : v-for显示商品名字,价格,数量和对商品进行操作,全选的功能结构仍然分成 : index.html , index.js , style.css index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购
Vue.js实现开发购物车功能的方法详解

本文实例讲述了Vue.js实现开发购物车功能的方法.分享给大家供大家参考,具体如下: 购物车一般包含商品名称.单价.数量等信息,数量可以任意新增或减少,商品项也可删除,还可以支持全选或多选: 我们把这个小项目分为三个文件: index.html (页面) index.js (Vue 脚本) style.css (样式) 1 index.js 首先在 js 中初始化 Vue 实例,整体模板如下: var app = new Vue({ el: '#app', data: { ... }, moun
Vue.js实现的购物车功能详解

本文实例讲述了Vue.js实现的购物车功能.分享给大家供大家参考,具体如下: 使用计算属性,内置指令,方法等基础知识开发购物车. 需求分析:展示一个已经加入购物车的商品列表,包含商品名称.商品单价.购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除.效果如图所示: --实例来自<Vue.js实战>第五章逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleR
Vue+Node实现商品列表的分页、排序、筛选，添加购物车功能详解

本文实例讲述了Vue+Node实现商品列表的分页.排序.筛选,添加购物车功能.分享给大家供大家参考,具体如下: 1.分页商品列表的分页实现是后台根据前端请求的页面大小.页码位置,去数据库中查询指定位置的数据然后返回给前端.比如页面大小为8,要查第3页的数据,则跳过2*8条数据,然后返回接下来的8条数据. 实现滚动加载:页面刚一加载完成并不需要请求所有数据,只显示一部分.当用户下拉到页面底部时,再去请求数据并拼接到商品数据列表中.通过vue-infinite-scroll插件实现滚动加载,在框架

Vue实现购物车功能

相关推荐

随机推荐