首页
所有分类
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 相关文章推荐
JavaScript自执行闭包的小例子
Jun 29 Javascript
js 操作符汇总
Nov 08 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
JavaScript正则表达式和级联效果
Sep 14 Javascript
详解webpack性能优化——DLL
Oct 20 Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 Javascript
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
一文了解Vue中的nextTick
May 06 Javascript
详解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) 模糊匹配(1) PyTorch(1) FuzzyWuzzy(1) 井字棋(1) 模型保存加载(1) 计算器(5) 五子棋(12) 人工智能(2) Pyecharts(7)
You might like
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
PHP循环结构实例讲解
2014/02/10 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
javascript tips提示框组件实现代码
2010/11/19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
详解angular element()方法使用
2017/04/08 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
python ElementTree 基本读操作示例
2009/04/09 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
python3.7 使用pymssql往sqlserver插入数据的方法
2019/07/08 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
python中pickle模块浅析
2020/12/29 Python
Python如何telnet到网络设备
2021/02/18 Python
瑞典的玛丽小姐：Miss Mary of Sweden
2019/02/13 全球购物
MIKI HOUSE美国官方网上商店：日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
担保书格式及范文
2014/04/01 职场文书
公证委托书大全
2014/04/04 职场文书
教育合作协议范本
2014/10/17 职场文书
个人优缺点总结
2015/02/28 职场文书
个人求职自荐信范文
2015/03/06 职场文书
审美与表现自我评价
2015/03/09 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL