Vue.js实现的购物车功能详解


Posted in Javascript onJanuary 27, 2019

本文实例讲述了Vue.js实现的购物车功能。分享给大家供大家参考,具体如下:

使用计算属性,内置指令,方法等基础知识开发购物车。

需求分析:展示一个已经加入购物车的商品列表,包含商品名称、商品单价、购买数量和操作,以及最后确定是否选中商品的功能,总价格为选中商品的价格,够买数量可以增加减少,商品可以从购物车中移除。效果如图所示:

Vue.js实现的购物车功能详解

——实例来自《Vue.js实战》第五章

逻辑整理:vue实例定义一个数组list存放商品信息,定义方法与减少按钮,增加按钮等联系,动态改变商品数量,通过handleRemove()移除list中的值;利用each()遍历所有type='checkbox'input,修改它们的状态,最后用totalPrices()计算商品总价格。

index.html

<div id="app">
    <template v-if="list.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>操作</th>
            <th><input type="checkbox" name="list" @click="checkBox()" id="checkBox"></th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.price }}</td>
            <td>
                <button
                  @click="handleReduce(index)"
                  :disabled="item.count === 1" class="btn"> - </button>
                {{ item.count }}
                <button @click="handleAdd(index)" class="btn"> + </button>
            </td>
            <td>
                <button @click="handleRemove(index)" class="btns">移除</button>
            </td>
            <td style="text-align: center;">
                <input type="checkbox" name="list" @click="totalPrices()">
            </td>
          </tr>
        </tbody>
      </table>
      <div id="price">总价:¥{{totalPrice}}</div>
    </template>
    <div v-else>购物车为空</div>
</div>

style.css

*{
  margin: 0px;
  padding: 0px;
}
[v-cloak] {
  display: none;
}
#app{
  width: 200px;
  height: 200px;
  margin: 10px auto;
  text-align: center;
}
#price{
  width: 457px;
  height: 40px;
  border: 1px solid #e9e9e9;
  border-top: 0;
  line-height: 40px;
}
table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
}
th,td{
  padding: 8px 16px;
  border:1px solid #e9e9e9e9;
  text-align: left;
}
th{
  background: #f7f7f7;
  color: #5c6c77;
  font-weight: 600;
  white-space: nowrap;
}
.btn{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border:1px solid #cccccc;
  background: #ffffff;
  color: #778899;
}
.btns{
  width: 40px;
  height: 20px;
  border-radius: 5px;
  border:1px solid #cccccc;
  background: #ffffff;
  color: #778899;
  line-height: 20px;
}

app.js

var app=new Vue({
      el:'#app',
      data:{
        list: [
          {
            id:1,
            name:'iPhone 7',
            price:6188,
            count:1
          },
          {
            id:2,
            name:'iPad Pro',
            price:5888,
            count:1
          },
          {
            id:3,
            name:'MaxBook Pro',
            price:21488,
            count:1
          }
        ],
        totalPrice: 0
      },
      methods:{
        handleReduce: function (index) {//减少按钮
          if(this.list[index].count === 1){
            return;
          }
          this.list[index].count--;
          this.$options.methods.totalPrices();
        },
        handleAdd: function (index) {//增加按钮
          this.list[index].count++;
          this.$options.methods.totalPrices();
        },
        handleRemove: function (index) {//移除按钮
          this.list.splice(index, 1);
          $("tr").eq(index+1).remove("input[type='checkbox']");
          this.$options.methods.totalPrices();
        },
        checkBox: function (){//选中状态
          if($("#checkBox").is(':checked')==true){
            $("input[type='checkbox']").each(function(){
              $("input[type='checkbox']").attr("checked",true);
            });
          }else{
            $("input[type='checkbox']").each(function(){
              $("input[type='checkbox']").attr("checked",false);
            });
          }
          this.$options.methods.totalPrices();
        },
        totalPrices: function (){//计算总价格
          var total = 0;
          for(var i = 0;i < app.list.length;i++){
            var item = app.list[i];
            if($("input[type='checkbox']").eq(i+1).is(':checked')){
              total += item.price * item.count;
            }
          }
          app.totalPrice = total.toString().replace(/\B(?=(\d{3})+$)/g,',');
        }
      }
});

GitHub地址:https://github.com/GitHubVikas/Yao/tree/master/DemoOne

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

Javascript 相关文章推荐
JS代码格式化和语法着色V2
Oct 14 Javascript
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
jQuery示例收集
Nov 05 Javascript
JavaScript 程序编码规范
Nov 23 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
浅析vue数据绑定
Jan 17 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 #Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 #Javascript
命令行批量截图Node脚本示例代码
Jan 25 #Javascript
Node.js 进程平滑离场剖析小结
Jan 24 #Javascript
Vue.js样式动态绑定实现小结
Jan 24 #Javascript
实例讲解JavaScript预编译流程
Jan 24 #Javascript
实例讲解vue源码架构
Jan 24 #Javascript
You might like
php绘图之加载外部图片的方法
2015/01/24 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
js调试工具console.log()方法查看js代码的执行情况
2014/08/08 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
python在ubuntu中的几种安装方法(小结)
2017/12/08 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
python爬取微信公众号文章
2018/08/31 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python实现飞船大战
2020/04/24 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
2014年安全生产大检查方案
2014/05/13 职场文书
项目建议书怎么写
2014/05/15 职场文书
党员承诺书格式
2014/05/21 职场文书
个人委托书范本
2014/09/13 职场文书
乡党委干部党的群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
总经理检讨书范文
2015/02/16 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android