vue入门------简单购物车功能实现(全选,数量加减,价格加减)

简易购物车功能(无任何布局 主要是功能)
  • 数量的加减
  • 商品的总价钱
  • 全选与全不选
  • 删除(全选、价格 受影响)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="box">
        全选:<input type="checkbox" @click="handleAllChecked($event)" v-model="isAllChecked"/>
        <ul>
          <li v-for="data,index in list" :key="data.id" style="overflow: hidden;">
            <input type="checkbox" :value="data" v-model="checkgroup" style="float: left;"
            @change="handleItemChange()"/>
            <div style="float: left;">
              <div>{{data.name}}</div>
              <div>价格:{{data.price}}</div>
              <!-- <div>数量:{{data.number}}</div> -->
            </div>

            <div style="float: left;margin-left: 20px;">
              <button @click="handleDel(data)">-</button>
              {{data.number}}
              <button @click="data.number++">+</button>
            </div>

            <div style="float: right;">
              <button @click='handleRemove(index,data.id)'>remove</button>
            </div>
          </li>
        </ul>

        {{checkgroup}}

        <p>总金额:{{ getSum() }}</p>
    </div>

    <script type="text/javascript">
       var vm =  new Vue({
          el:"#box",
          data:{
            name:"kerwin",
            checkgroup:[],
            isAllChecked:false,
            list:[
                {
                      name:"商品1",
                      price:10,
                      number:1,
                      id:"1",
                },
                    {
                      name:"商品2",
                      price:20,
                      number:2,
                      id:"2",
                    },
                    {
                      name:"商品3",
                      price:30,
                      number:3,
                      id:"3",
                    }
              ]
          },
          methods: {
            // 每个chekcbox 改变触发, 判读数组的长度与list长度
            handleItemChange(){
              console.log(this.checkgroup.length)
              if(this.checkgroup.length===this.list.length && this.list.length !== 0 ){
                //全选chekcbox勾上
                this.isAllChecked = true
              }else{
                // 取消checkbox勾选
                this.isAllChecked = false
              }
            },

            //全选按钮处理
            handleAllChecked(evt){

              if(evt.target.checked){
                //全选中
                this.checkgroup = this.list
              }else{
                //全不选中
                this.checkgroup = []
              }
            },
            //商品减少
            handleDel(data){
              data.number--
              if(data.number===0){
                data.number =1
              }
            },

            //计算总金额
            getSum(){
              var sum = 0;
              for(var i in this.checkgroup){
                sum += this.checkgroup[i].price*this.checkgroup[i].number
              }
              return sum
            },
            //删除数据
            handleRemove(index,id) {
              //list
              this.list.splice(index,1)
              //checkgroup
              this.checkgroup =this.checkgroup.filter(item => item.id !== id)

              this.handleItemChange()
            }
          },
        })
    </script>

原文地址:https://www.cnblogs.com/zhaoxinran997/p/12305474.html

时间: 2024-10-10 09:01:45

vue入门------简单购物车功能实现(全选,数量加减,价格加减)的相关文章

VUE.JS实现购物车功能

购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3. 服务器端返回JSON格式,使用模板引擎+dom操作更新页面 最近新学习了vue.js,一个轻量级的mvvm(Model-View-ViewModel),vue.js是数据驱动无须操作dom,它提供特殊的html语言,把dom和数据绑定在一起,一旦修改了数据,dom将会自动更新更新. 关于vue.

Goods:购物车模块之全选按钮与条目之复选按钮的click事件

1 <script type="text/javascript"> 2 /* 3 计算总计方法 4 */ 5 $(function() { 6 7 showTotal(); //文档加载完就计算总计 8 9 //给全选添加click事件 10 $("#selectAll").click(function() { 11 //获取全选的状态 12 var bool = $("#selectAll").attr("checked&

php--jquery操作全选、批量删除、加减行

html代码 加减行 全选  反选 批量删除

jquery实现全选、取消反选、加JavaScript三元运算(三种法法实现反选)

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <input type="button" value="全选" onclick="c

Vue.js 简单购物车开发

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

实现简单购物车功能

#!/usr/bin/python #-*- coding:utf-8 -*- aalist=['Mac','Coffee','Book','Bus'] price=['10000', '50', '500',  '2000'] shop_list=[]    #购物车列表 gongzi=int(raw_input('请输入你的工资:')) import sys if gongzi < int(price[1]):    #如果工资小于coffee的价格:   print '请努力工作!!!你的

Android中购物车的全选、反选、问题和计算价格

此Demo主要解决的是购物车中的全选,反选计算价格和选中的条目个数的问题,当选中几条时,点击反选,会把当先选中的变为不选中,把不选中的变为选中.点击全选会全部选中,再次点击时,变为全部不选中. //-----------一下为main的布局----------------------- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http

用Vue实现一个全选指令

最近用vue做了两个项目,都需要实现全选反选的功能,两个项目用了两种实现方法,第一个项目用vue的computed,第二个项目用指令来实现,用起来,发觉指令更加方便. 第一次做全选的时候是刚开始接触vue不久,全选的实现参考了知乎(链接:https://www.zhihu.com/question/37833194/answer/91812053)上的实现方法:1.从服务器拿到数据,为每个item设置checked属性2.计算选中的数量selectCount,如果选中的数量与selectItem

vue实现全选反选

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选反选</title> <script src="js/vue.js"></script></head><body> <h1>全选反选</h1> <div id=