zoukankan      html  css  js  c++  java
  • 使用Vue实现购物车功能

    要实现的效果如图下

    遍历循环data中购物车的数据渲染到页面上,产品的所有字段,购买的数量,以及单价

    先遍历直接能用的数据:

    接着对购物车产品数量表单进行双向数据绑定,给左右按钮加一个点击事件使用三元表达式判断当前产品数量进行累加或者递减

    通过单价*数量绑定总金额:

    接下来给产品列表,每一项添加一个select字段,判断当前产品是否被选中,默认应该都是选中的:

    接下来在计算属性中添加一个获取订单总金额的方法:

    接下来单选按钮添加点击事件,对是否选中进行取反操作,并给选中按钮的绑定样式:

    看一眼效果基本实现了

     接下来实现全选的按钮:

    添加一个产品选择方法

    绑定到全选按钮的点击事件并把是否全选作为参数传递进去

    到这里全选按钮也完工了

    接下来删除单条产品,通过索引可以获取到当前的条目:

    在methods里定义删除单条方法:

    绑定点击事件

    在method添加一个删除选中的事件

     到这里项目就完工了

    http://delisteam.gitee.io/vuegouwuchelianxi/

  • 相关阅读:
    Django错误笔记1
    Django学习笔记1 启动及配置一个Django项目
    ubuntu 安装mysqldb
    二叉树 总结
    序列二叉树和反序列 (不是自己做的)
    二叉树的路径
    二叉搜索树的后续遍历
    二叉树层序遍历
    栈的压入 弹出序列
    包含 min的栈
  • 原文地址:https://www.cnblogs.com/rmty/p/11056916.html
Copyright © 2011-2022 走看看