vue实现购物车和地址选配（二）
- 参考文献： vue官网： vue.js
- 效果展示：全选和取消全选，计算总金额
- 项目源代码：https://github.com/4561231/hello_world
- 项目核心代码实现及踩坑
- 1.全选和取消全选
vue实例代码如下
new Vue({
el:'#app',
data:{
productlist:[]
},
//必须加mounted函数，这是页面初加载，如果不写这个函数，network中将请求不到数据
mounted:function(){
this.cartView();
},
//局部过滤器
filters:{
formatMoney:function(value){
return "$" + value.toFixed(2);
}
},
methods:{
cartView:function(){
var _this=this; //要保存这个this,
this.$http.get('data/cartData.json',{'id':'123'}).then(function(res){
_this.productlist=res.data.result.list; //这里的this已经不是实例对象了
});
},
changeMoney:function(product,way){
if(way>=1){
product.productQuantity++;
}else{
product.productQuantity--;
if(product.productQuantity<1){
product.productQuantity=1;
}
}
},
selectedProduct:function(item){
//每次选中的时候先判断当前这个item.checked属性是否存在
if(typeof item.check=="undefined"){
this.$set(item,'check',true);//如果不存在就先给他设置一个
}else{
item.check=!item.check;
}
}
}
});
Vue.filter('money',function(value,type){
return '$' + value.toFixed(2)+type;
});
vue实例.js
- 单选：
当用户选择了按钮之后需要给选择按钮加上check这个class类，
<a href="javascript:void 0" class="item-check-btn" v-bind:class="{'check':item.check}" v-on:click="selectedProduct(item)">
当用户点击的时候会调用selectedProduct(item)函数，用item来区分每一个li
selectedProduct:function(item){
//每次选中的时候先判断当前这个item.checked属性是否存在
if(typeof item.check=="undefined"){
this.$set(item,'check',true);//如果不存在就先给他设置一个
}else{
item.check=!item.check;
}
}
踩坑一：局部注册：this.$set(item,'check',true);
全局注册：Vue.set(item,'check',true);
2.全选：
new Vue({
el:'#app',
data:{
productlist:[],
checkAllFrag:false//默认没有全选
},
//必须加mounted函数，这是页面初加载，如果不写这个函数，network中将请求不到数据
mounted:function(){
this.cartView();
},
//局部过滤器
filters:{
formatMoney:function(value){
return "$" + value.toFixed(2);
}
},
methods:{
cartView:function(){
var _this=this; //要保存这个this,
this.$http.get('data/cartData.json',{'id':'123'}).then(function(res){
_this.productlist=res.data.result.list; //这里的this已经不是实例对象了
});
},
changeMoney:function(product,way){
if(way>=1){
product.productQuantity++;
}else{
product.productQuantity--;
if(product.productQuantity<1){
product.productQuantity=1;
}
}
},
selectedProduct:function(item){
//每次选中的时候先判断当前这个item.checked属性是否存在
if(typeof item.check=="undefined"){
this.$set(item,'check',true);//如果不存在就先给他设置一个
}else{
item.check=!item.check;
}
},
//
checkAll:function(){
//只要点击了就把当前的check取反
this.checkAllFrag=!this.checkAllFrag;
var _this=this;
if(this.checkAllFrag){
_this.productlist.forEach(function(item,index){
if(typeof item.check =="undefined"){
_this.$set(item,'check',true);
}else{
item.check=true;
}
});
}
}
}
});
Vue.filter('money',function(value,type){
return '$' + value.toFixed(2)+type;
});
到全选时的实例.js
html代码：为全选添加了一个check属性，在实例里面定义了一个
checkAllFrag默认为false, 当点击的时候调用checkAll()方法
<a href="javascript:void 0" v-bind:class="{'check':checkAllFrag}" v-on:click="checkAll()">
<span class="item-check-btn" >
<svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
</span>
<span>全选</span>
实例对象的checkAll()方法：
checkAll:function(){
//只要点击了就把当前的check取反
this.checkAllFrag=!this.checkAllFrag;
var _this=this;
if(this.checkAllFrag){//如果checkAllFrag=true
_this.productlist.forEach(function(item,index){ //就把上面的单选按钮的check都设置为true
if(typeof item.check =="undefined"){
_this.$set(item,'check',true);
}else{
item.check=true;
}
});
}
3.到取消全选的实例方法
new Vue({
el:'#app',
data:{
productlist:[],
checkAllFrag:false//默认没有全选
},
//必须加mounted函数，这是页面初加载，如果不写这个函数，network中将请求不到数据
mounted:function(){
this.cartView();
},
//局部过滤器
filters:{
formatMoney:function(value){
return "$" + value.toFixed(2);
}
},
methods:{
cartView:function(){
var _this=this; //要保存这个this,
this.$http.get('data/cartData.json',{'id':'123'}).then(function(res){
_this.productlist=res.data.result.list; //这里的this已经不是实例对象了
});
},
changeMoney:function(product,way){
if(way>=1){
product.productQuantity++;
}else{
product.productQuantity--;
if(product.productQuantity<1){
product.productQuantity=1;
}
}
},
selectedProduct:function(item){
//每次选中的时候先判断当前这个item.checked属性是否存在
if(typeof item.check=="undefined"){
this.$set(item,'check',true);//如果不存在就先给他设置一个
}else{
item.check=!item.check;
}
},
//
checkAll:function(flag){
this.checkAllFrag=flag; //将前面传来的标志记录下来，全选=true,不全选=false
var _this=this;
_this.productlist.forEach(function(item,index){ //就把上面的单选按钮的check都设置为true
if(typeof item.check =="undefined"){
_this.$set(item,'check',_this.checkAllFrag); //把单选按钮设置成和全选时=true,不全选时=false
}else{
item.check=_this.checkAllFrag;
}
});
}
}
});
Vue.filter('money',function(value,type){
return '$' + value.toFixed(2)+type;
});
到不全选时的实例.js
html:全选和不全选调用的是同一个方法，通过传递过去的参数不同来区分
<a href="javascript:void 0" v-bind:class="{'check':checkAllFrag}" v-on:click="checkAll(true)">
<span>全选</span>
</a>
<a href="javascript:void 0" class="item-del-btn" >
<span v-bind:class="{'check':checkAllFrag}" v-on:click="checkAll(false)">取消全选</span>
全选和不全选的实例方法
checkAll:function(flag){
this.checkAllFrag=flag; //将前面传来的标志记录下来，全选=true,不全选=false
var _this=this;
_this.productlist.forEach(function(item,index){ //就把上面的单选按钮的check都设置为true
if(typeof item.check =="undefined"){
_this.$set(item,'check',_this.checkAllFrag); //把单选按钮设置成和全选时=true,不全选时=false
}else{
item.check=_this.checkAllFrag;
}
});
}
4.计算总金额
new Vue({
el:'#app',
data:{
productlist:[],
totalMoney:0,
checkAllFrag:false,//默认没有全选
},
//必须加mounted函数，这是页面初加载，如果不写这个函数，network中将请求不到数据
mounted:function(){
this.cartView();
},
//局部过滤器
filters:{
formatMoney:function(value){
return "$" + value.toFixed(2);
}
},
methods:{
cartView:function(){
var _this=this; //要保存这个this,
this.$http.get('data/cartData.json',{'id':'123'}).then(function(res){
_this.productlist=res.data.result.list; //这里的this已经不是实例对象了
});
},
changeMoney:function(product,way){
if(way>=1){
product.productQuantity++;
}else{
product.productQuantity--;
if(product.productQuantity<1){
product.productQuantity=1;
}
}
this.calcTotalPrice();
},
selectedProduct:function(item){
//每次选中的时候先判断当前这个item.checked属性是否存在
if(typeof item.check=="undefined"){
this.$set(item,'check',true);//如果不存在就先给他设置一个
}else{
item.check=!item.check;
}
this.calcTotalPrice();
},
//
checkAll:function(flag){
this.checkAllFrag=flag; //将前面传来的标志记录下来，全选=true,不全选=false
var _this=this;
_this.productlist.forEach(function(item,index){ //就把上面的单选按钮的check都设置为true
if(typeof item.check =="undefined"){
_this.$set(item,'check',_this.checkAllFrag); //把单选按钮设置成和全选时=true,不全选时=false
}else{
item.check=_this.checkAllFrag;
}
});
this.calcTotalPrice();
},
calcTotalPrice:function(){
var _this=this;
_this.totalMoney=0;
_this.productlist.forEach(function(item,index){
if(item.check){
_this.totalMoney+=item.productPrice*item.productQuantity;
}
});
}
}
});
Vue.filter('money',function(value,type){
return '$' + value.toFixed(2)+type;
});
到计算总金额这一步的vue实例.js
html结构：
<div class="item-total">
Item total: <span class="total-price">{{totalMoney}}</span>
</div>
Vue中的方法：
calcTotalPrice:function(){
var _this=this;
_this.totalMoney=0;//每次计算都要清零处理
_this.productlist.forEach(function(item,index){
if(item.check){//如果被选中，就计算总金额，并且把每一项累加
_this.totalMoney+=item.productPrice*item.productQuantity;
}
});
}
踩坑：踩坑一：每次选中了单选按钮时需要重新计算一次
踩坑二：点击+ - 按钮的时候也需要重新计算一次
踩坑三：用户点击全选的时候也需要调用这个方法
踩坑三：每次调用这个计算函数都应该给totalMoney清零
踩坑四：input表单需要用v-model双向绑定
vue实现购物车和地址选配（二）的更多相关文章
- vue实现购物车和地址选配
参考文献 vue.js官网 项目演示:数据渲染,格式化数据,点击加,减号自动加减 项目准备 1. 项目css和js文件 https://github.com/4561231/hello ...
- 关于慕课网《使用vue2.0实现购物车和地址选配功能》的总结
视频学习网址:http://www.imooc.com/learn/796 源码打包:https://codeload.github.com/fachaoshao/Vue-ShoppingCart/z ...
- vue购物车和地址选配（三）
参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, che ...
- VUE2.0实现购物车和地址选配功能学习第二节
第二节 创建VUE实例 购物车项目计划: 1.创建一个vue实例 2.通过v-for指令渲染产品数据 3.使用filter对金额和图片进行格式化 4.使用v-on实现产品金额动态计算 5.综合演示 ① ...
- VUE2.0实现购物车和地址选配功能学习第六节
第六节 地址列表过滤和展开所有的地址 html:<li v-for="(item,index) in filterAddress">js: new Vue({ el:' ...
- VUE2.0实现购物车和地址选配功能学习第七节
第七节 卡片选中,设置默认 1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{ ...
- VUE2.0实现购物车和地址选配功能学习第五节
第五节 单件商品金额计算和单选全选功能 1.vue精髓在于操作data模型来改变dom,渲染页面,而不是直接去改变dom 2.加减改变总金额功能: html:<div class="c ...
- VUE2.0实现购物车和地址选配功能学习第四节
第四节 v-on实现金额动态计算 用￥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便 注: 1.es6语法=>和import等 好处在于res参数后 ...
- VUE2.0实现购物车和地址选配功能学习第三节
第三节 使用v-for渲染商品列表 1.使用vue-resource插件引入json数据 (注:在谷歌中调试打断点-- ,console还可以输出vm,res等属性列表,或者productList等一 ...
随机推荐
- SECCON 2014 CTF：Shuffle
很简单的一道小题 dia看一下是ELF文件 运行之: St0CFC}4cNOeE1WOS !eoCE{ CC T2hNto 是一串乱七八糟的字符 ida看一下: 很简单的逻辑 v5和v6是随机生成的两 ...
- 前端base64、baseurl加解密和RSA加解密
由于项目最近要进行安全测试,前端的用户和密码都是明文数据传送给后台那里,其实这样很很不安全的,容易泄露个人信息和密码.中间服务器的同事就提出,可以通过前端接收公钥,利用公钥对密码进行加密,把加密过密码 ...
- MySQL字段属性NUll的注意点
MySQL字段属性应该尽量设置为NOT NULL 除非你有一个很特别的原因去使用 NULL 值,你应该总是让你的字段保持 NOT NULL.这看起来好像有点争议,请往下看. 空值("&quo ...
- Python中数字之间的进制转换
Python中的数据转换 在python中可以通过内置方法进行相应的进制转换,但需记得转化成非十进制时,都会将数字转化成字符串 转化成二进制 a = 10 #声明数字,默认十进制 b = bin(a) ...
- L - Vases and Flowers HDU - 4614 线段树+二分
题意 给出一排空花瓶 有两种操作 1是 从A花瓶开始放F朵花 如果当前瓶有花就跳过前往下一个 直到花用完或者 瓶子到了最后一个为止 输出 成功放花的第一个和最后一个 如果没有输出 can not. ...
- LOJ6433 [PKUSC2018] 最大前缀和 【状压DP】
题目分析: 容易想到若集合$S$为前缀时,$S$外的所有元素的排列的前缀是小于$0$的,DP可以做到,令排列前缀个数小于0的是g[S]. 令f[S]表示$S$是前缀,转移可以通过在前面插入元素完成. ...
- MS-DOS 6.22 +Vim+masm 汇编环境
安装vim 个人习惯用 vim 编辑,因此稍微折腾了一下.不用这么麻烦直接用 edit 编辑也是可以的. 原来安装的 MS-DOS 7.10 虚拟机安装好vim后无法运行,所以改用了 MS-DOS 6 ...
- 参考RPC
普遍RPC在客户端需要提供接口,如果不提供则无法进行调用.同时,因为客户端也依赖提供的接口,服务端的升级.优化所带来的更新,客户端也要及时的更新API,否则会带来影响.这样,就带来了依赖接口,常常更新 ...
- Java和操作系统交互细节
结合 CPU 理解一行 Java 代码是怎么执行的 根据冯·诺依曼思想,计算机采用二进制作为数制基础,必须包含:运算器.控制器.存储设备,以及输入输出设备,如下图所示. enter image des ...
- Java 强制类型转换(类转换注意事项)
将一个类型强制转换成另一个类型的过程被称为类型转换.例如: double x =3.14; int y = (int)x; 将表达式x的值转换成整数类型,舍弃小数部分. 有时候也可能是类的对象引用的转 ...