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

<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>

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

  1. jQuery入门简单实现反选与全选

    //html代码<input type="checkbox" id= 'all' value="全选"> 选择全部 一键上路 <input t ...

  2. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  3. 第八十二篇:Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

  4. vue开发购物车,解决全选单选问题

    实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...

  5. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  6. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  7. vue - 列表显示(列互相影响,全选控制,更新数据)

    要实现的效果为:全选,且列A列B互相影响,列B勾选则列A一定勾选,列A取消勾选,则相应列B取消勾选 数组 vue中列表渲染有些不是相应式的 var list=[ { a:'aaaa', b:'ddd' ...

  8. php 实现简单购物车功能(2)

    上一篇的时候只是写了简单的加入购物车功能,购物车中产品的删除.提交订单后,库存的减少 以及客户账户的余额都没有完善, 这一篇是接着完善上一篇的,上一篇写到了购物车中删除的功能了,为了使删除的代码少敲一 ...

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

随机推荐

  1. .Net Core 导出Html到PDF

    前言 最近由于项目的需求问题,涉及到了在.Net Core中导出PDF的一个问题,最后选择方式是后端拼接到Html页面然后再通过Html导出到PDF.中间也尝试了许多的NuGet包.但是并不如意,可用 ...

  2. P1551 亲戚 并查集

    P1551 亲戚 题目背景 若某个家族人员过于庞大,要判断两个是否是亲戚,确实还很不容易,现在给出某个亲戚关系图,求任意给出的两个人是否具有亲戚关系. 题目描述 规定:x和y是亲戚,y和z是亲戚,那么 ...

  3. linux下 Error in 'python3':free(): invalid pointer

    linux下坑人的报错!折腾了好久. 现象:这次是一个底层库 C++,底层库之上一层SDK C++,之上再一层so库,用python调用SDK.然后python层依赖了opencv和SDK,调换ope ...

  4. FreeRTOS低功耗模式

    在系统或电源复位以后,微控制器处于运行状态.当CPU不需继续运行时,可以利用多种低功耗模式来节省功耗,例如等待某个外部事件时,用户需要根据最低电源消耗,最快速启动时间和可用的唤醒源等条件,选定一个最佳 ...

  5. python+opencv中最近出现的一些变化( OpenCV 官方的 Python tutorial目前好像还没有改过来?) 记一次全景图像的拼接

    最近在学习过程中发现opencv有了很多变动, OpenCV 官方的 Python tutorial目前好像还没有改过来,导致大家在学习上面都出现了一些问题,现在做一个小小的罗列,希望对大家有用 做的 ...

  6. 使用read、readline、readlines和pd.read_csv、pd.read_table、pd.read_fwf、pd.read_excel获取数据

    从文本文件读取数据 法一: 使用read.readline.readlines读取数据 read([size]):从文件读取指定的字节数.如果未给定或为负值,则去取全部.返回数据类型为字符串(将所有行 ...

  7. 使用postman测试接口

    1.什么是接口测试 其实接口测试就和普通功能测试没什么区别,区别就是功能测试是在页面上点点点,在页面上输入值,提交数据看结果,而接口测试没有页面,通过接口规范文档上的调用地址.请求参数,拼接报文,然后 ...

  8. ArcGIS10.2安装教程

    1,首先要下载Arcgis 10.2软件,很大大约有2个多G.下载后分别全部解压. 2,首先,安装相应的LicenseManager,双击Arcgis 10.2打开安装界面,选择安装. 3,开始安装L ...

  9. 机器学习李航——Adaboost课本例题实现

    例8.1Adaboost的例子 注意求D3或者D4的时候只需要把w替换一下就行,记得还得改阈值.这个代码算个半自动的,因为还需要手动改一下. import numpy as np def getA(e ...

  10. apace访问403错误的解决方法汇总

    作为一个努力学习的实习生,遇到问题还是靠记录才能更好的学习. 首先附上故障图 翻译过来就是啥呢? 于是天真的我去百度了一下大神们的解决方法,目录没权限嘛,来个777就完事了.一开始还觉得挺合乎情理的, ...