首页
所有分类
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 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
javascript实现动态标签云
Oct 16 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
js实现返回顶部效果
Mar 10 Javascript
js实现抽奖效果
Mar 27 Javascript
AngularJS中的路由使用及实现代码
Oct 09 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 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
PL450(1) SHARP(1) RP2100(1) BCL3000(2) ICF-SW7600(1) PL550(1) GF515(1) 低放电路(1) H-501(1) 乐信(1)
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
两个开源的Php输出Excel文件类
2010/02/08 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
php写app用的框架整理
2019/09/29 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
总结AJAX相关JS代码片段和浏览器模型
2007/08/15 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
继续学习javascript闭包
2015/12/03 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JavaScript简单拖拽效果（1）
2017/05/17 Javascript
layui实现数据分页功能
2019/07/27 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
python实现汉诺塔方法汇总
2016/07/25 Python
transform python环境快速配置方法
2018/09/27 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python 使用shutil复制图片的例子
2019/12/13 Python
python定义类self用法实例解析
2020/01/22 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
HTML5操作WebSQL数据库的实例代码
2017/08/26 HTML / CSS
历史学专业个人的自我评价
2013/10/13 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers