首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue实现的仿淘宝购物车功能详解

Posted in Javascript onJanuary 27, 2019

本文实例讲述了vue实现的仿淘宝购物车功能。分享给大家供大家参考，具体如下：

下面是一张众所周知的淘宝购物车页面，今天要讲解的案例就是用vue.js做一个类似的页面

vue实现的仿淘宝购物车功能详解

首先简单介绍一下可能会用到的一些vue.js的用法：

v-bind，绑定属性；例如v-bind:class="{'class1':flag}"，这是常用的绑定样式的方法，如果flag为true则class=class1；v-bind:src="image",image就是图像的路径;

v-if="flag"与v-show="flag"，如果flag为true，则绑定的为“可见”，不同的是v-show是一开始就渲染在DOM中的，改变的则是它的display而已，而v-if为false则是从HTML代码中移除；

v-on:或@，样式绑定v-on:click="dosomething()"或者@click="dosomething()"，点击触发dosomething函数；

v-for循环，v-for="item in items"，items为数组，item为items数组的值而不是索引；

要注意的是当this作用域的改变：当this作用域改变是我们设置var self = this，在之后的使用中用self代替；

下面是HTML代码：

<html>
  <head>
    <title>购物车</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="shop.css" rel="external nofollow" >
  </head>
  <body>
    <div id="app">
      <div class="header"><span style="margin-left: 75px;">商品</span><span style="margin-left: 70px;">单价</span><span style="margin-left: 35px;">数量</span><span style="margin-left: 40px;">总价</span></div>
      <div v-for="item in goods">
      <div class="show" v-show="item.selected">
        <span class="choice" v-bind:class="{'checked':item.checked}" @click="check(item)"></span>
        <div style="float:left;margin-left: 20px;"><img v-bind:src="item.image" v-bind:alt="item.alt" class="image"/><span class="text">{{item.name}}</span></div>
        <span style="float:left;margin-left: 20px;margin-top:20px;width:40px;">{{item.price}}元</span>
        <div style="float:left;margin-left: 30px;margin-top: 20px;">
          <span v-on:click="changeNum(item,-1)"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >-</a></span>
          <input v-model="item.number" class="output" disabled/>
          <span v-on:click="changeNum(item,1)"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >+</a></span>
        </div>
        <div style="float:left;margin-left: 30px;margin-top: 25px;width:51px;">￥{{item.price * item.number}}元</div>
        <span class="icon" @click="seen=true"></span>
      </div>
      </div>
      <!--footer-->
      <div id="footer">
       <span class="choice" style="margin-top:18px;" v-bind:class="{'checked':checkAllFlag}"></span>
        <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="checkAll(true)">全选</a>
        <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:;" @click="checkAll(false)">取消全选</a>
        <span style="display:inline-block;margin-left:70px;width:95px;">Total:￥{{totalAll}}元</span>
        <span><button class="count">结 算</button></span>
      </div>   
      <div id="info" v-show="seen">
       <p style="margin-top:20px;">是否删除该商品?</p><div class="close" @click="seen=false">×</div>
       <button class="get" style="padding-left:10px;" @click="">yes</button><button class="get" style="margin-left:20px;" @click="seen=false">no</button>
      </div>  
      <div class="shadow" v-show="seen"></div> 
    </div>
  </body>
  <script src="./src/vue.min.js"></script>
  <script src="./src/vue-resource.min.js"></script>
  <script src="shop.js"></script>
</html>

下面的是js的代码：

var vm = new Vue({
    el:'#app',
    data:{
      total: 0,
      totalAll: 0,
      goods: [],//商品为数组
      checkAllFlag: false,
      seen: false,
      delFlag: true
    },
    mounted: function () {
      this.goodlist();
    },
    methods:{
      //改变商品数量
      changeNum:function (item,flag) {
              if (flag>0) {
                item.number++;
                }else{
                 item.number--;
                 if(item.number<1){
                 item.number = 1;
                 }    
                 }
              this.totalMoney();
      },
      //是否选中
      check:function (item) {
       if(typeof item.checked == 'undefined'){
       this.$set(item,"checked",true);
          //局部为item添加“checked”，值为true
       }else{
       item.checked = !item.checked;
       }
       this.totalMoney();
      },
      //通过$http.get方法ajax地交互获取商品信息，一定要引入vue-resource组件
      goodlist:function () { 
        var self = this;
        this.$http.get("shop.json").then(function (res) {
          self.goods = res.data.result.goods;
        },function () {
          console.log("failed");
        });
      },
      //是否全选
      checkAll:function (flag) {
       this.checkAllFlag = flag;
       var self = this;
       this.goods.forEach(function(value,index){
        if(typeof value.checked == 'undefined'){
           self.$set(value,"checked",self.checkAllFlag);
           }else{
           value.checked = self.checkAllFlag;
           }
       });
       this.totalMoney();
      },
      //结算选中商品的价格
      totalMoney:function () {
        //初始化总价
       this.totalAll = 0;
       var self =this;
        //通过foreach循环判断是否被选中
       this.goods.forEach(function(value,index){
       if(value.checked){
        self.totalAll += value.price * value.number;
       }
       });
      }
    }
})

下面是CSS代码：

*{padding: 0;margin: 0;}
a{text-decoration: none;color: black;}
#app{width: 500px;height: 600px;border: 1px solid;position: absolute;margin-top:20px;margin-left:50px;}
.header{width: 500px;height: 30px;line-height: 30px;background-color: darkmagenta;}
.header span{display: inline-block;width: 50px;height: 30px;}
.show{width: 500px;height: 85px;margin-top: 5px;}
#footer{position: absolute;bottom: 0;width: 500px;height: 50px;background-color: #c7c7c9;}
.output{width: 40px;height: 20px;}
.image{width: 60px;height: 80px;float:left;}
.choice{display: inline-block;width: 15px;height: 15px;border-radius: 15px;border: 1px solid;float: left;margin-top: 30px;margin-left: 20px;}
.checked{background-color: darkorange;}
.icon{background-image: url(del.png);display: inline-block;width: 30px;height: 30px;margin-left: 50px;margin-top: 20px;}
.text{display:inline-block;width:50px;height:20px;line-height:20px;font:12px;margin-top:20px;margin-left:5px;float:left;}
.count{width:100px;height:40px;background-color:red;line-height:40px;font-size:16px;margin-left:40px;margin-top:5px;}
#footer a{display:inline-block;margin-left:5px;height:22px;}
#info{width:250px;height:100px;position:absolute;border:1px solid;margin-top:-250px;margin-left:120px;background-color:#c7c7c9;text-align:center;z-index:999;}
.get{width:80px;height:30px;font:17px;margin-top:10px;}
.shadow{width:100%;height:100%;background-color:black;opacity:0.8;margin-top:-480px;z-index:1;}
.close{position:absolute;right:2px;top:-5px;cursor:pointer;}

下面是json代码：

{
 "status":1,
 "result":{
 "total":50,
   "goods":[
     {
       "name":"香烟",
       "price":15,
       "number":1,
       "selected": true,
       "image": "./img/xiangyan.jpg",
       "alt": "香烟"
     },
     {
       "name": "啤酒",
       "price": 12,
       "number": 1,
       "selected": true,
       "image": "./img/pjiu.jpg",
       "alt": "啤酒"
     },
     {
       "name": "打火机",
       "price": 2,
       "number": 1,
       "selected": true,
       "image": "./img/fire.jpg",
       "alt": "打火机"
     },
     {
       "name": "鸡腿",
       "price": 5,
       "number": 1,
       "selected": true,
       "image": "./img/chick.jpg",
       "alt": "鸡腿"
     },
     {
       "name": "垃圾袋",
       "price": 8,
       "number": 1,
       "selected": true,
       "image": "./img/bush.jpg",
       "alt": "垃圾袋"
     }
   ]
  },
  "message":""
}

实现的结果如下图：

vue实现的仿淘宝购物车功能详解

代码下载：https://github.com/createor/vue/raw/master/vue.zip

或者点击此处本站下载。

希望本文所述对大家vue.js程序设计有所帮助。

vue实现的仿淘宝购物车功能详解

- Author -

Cairo960918

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 遍历json数组的实现代码
Sep 22 Javascript
jquery 单击li防止重复加载的实现代码
Dec 24 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
vue实现简单学生信息管理
May 30 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 Javascript
Vue实现图书管理小案例
Dec 03 Vue.js
详解vue路由篇(动态路由、路由嵌套)
Jan 27 #Javascript
实例讲解JS中pop使用方法
Jan 27 #Javascript
Vue.js实现的购物车功能详解
Jan 27 #Javascript
JS温故而知新之变量提升和时间死区
Jan 27 #Javascript
vue组件文档（.md）中如何自动导入示例（.vue）详解
Jan 25 #Javascript
命令行批量截图Node脚本示例代码
Jan 25 #Javascript
Node.js 进程平滑离场剖析小结
Jan 24 #Javascript
纸巾盒(1) ICF-F10(1) 德生G88(1) 爱尔兰购物网站(30) 天梯图(1) AE3805(1) 美国购物网站(1542) CPU(2) 香港购物网站(84) SLi Minor 2020(63)
You might like
解决phpmyadmin中缺少mysqli扩展问题的方法
2013/05/06 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
php实现读取内存顺序号
2015/03/29 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
（推荐一个超好的JS函数库）S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
简介JavaScript中的getSeconds()方法的使用
2015/06/10 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
Angular 4依赖注入学习教程之InjectToken的使用（八）
2017/06/04 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
CheckBox多选取值及判断CheckBox选中是否为空的实例
2017/10/31 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python @property装饰器原理解析
2020/01/22 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
用python实现一个简单的验证码
2020/12/09 Python
英国森林假期：Forest Holidays
2021/01/01 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
大学生专业个人学习的自我评价
2013/10/26 职场文书
代理人委托书
2014/08/01 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
Linux安装Nginx步骤详解
2021/03/31 Servers