首页
所有分类
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 相关文章推荐
js添加select下默认的option的value和text的方法
Oct 19 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
前端性能优化及技巧
May 06 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
《javascript少儿编程》location术语总结
May 27 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
vue element实现表格合并行数据
Nov 30 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
德生9700DX(1) 德劲1103(3) Panasonic(1) PHILIPS(3) 松下(1) L4X25T(1) 德生PL330(2) ICF-SW55(1) 飞利浦(2) ICF-SW7600GR(1)
You might like
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP解耦的三重境界（浅谈服务容器）
2017/03/13 PHP
理解Javascript_05_原型继承原理
2010/10/13 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
删除节点的jquery代码
2014/01/13 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
简单理解Python中的装饰器
2015/07/31 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Django rest framework分页接口实现原理解析
2020/08/21 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
python制作抽奖程序代码详解
2021/01/15 Python
纯CSS实现颜色渐变效果（包含环形渐变、线性渐变、彩虹效果等）
2014/05/07 HTML / CSS
Tory Burch英国官方网站：美国时尚生活品牌
2017/12/06 全球购物
Nordgreen英国官网：斯堪的纳维亚设计师手表
2018/10/24 全球购物
阿玛尼意大利官网：Armani意大利
2018/10/30 全球购物
车间操作工岗位职责
2013/12/19 职场文书
大学生村官工作感言
2014/01/10 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
简易版租房协议书范本
2014/10/13 职场文书
个性与发展自我评价
2015/03/06 职场文书
党员承诺书格式范文
2015/04/28 职场文书
医院合作意向书范本
2015/05/08 职场文书
行政处罚听证告知书
2015/07/01 职场文书
初中生物教学反思
2016/02/20 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
笔记本自带的win11如何跳过联网激活？
2022/04/20 数码科技