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程序设计有所帮助。

Javascript 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
jQuery get和post 方法传值注意事项
Nov 03 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 Javascript
Node.js 深度调试方法解析
Jul 28 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 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
You might like
PHP中str_replace函数使用小结
2008/10/11 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
js Math 对象的方法
2013/09/01 Javascript
js jq 单击和双击区分示例介绍
2013/11/05 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
学习Python selenium自动化网页抓取器
2018/01/20 Python
python 字典操作提取key,value的方法
2019/06/26 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
Can a struct inherit from another struct? (结构体能继承结构体吗)
2016/09/25 面试题
中层干部岗位职责
2013/12/18 职场文书
餐饮业创业计划书范文
2014/01/06 职场文书
劳动之星获奖感言
2014/02/01 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
Tomcat弱口令复现及利用
2022/05/06 Servers
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技