- 参考资料：vue.js官网
- 项目演示：
- 项目源代码：
- 核心代码及踩坑
删除：
new Vue({
el:'#app',
data:{
productlist:[],
totalMoney:0,
checkAllFrag:false,//默认没有全选
deFlag:false,
//当前的存起来
curProduct:''
},
//必须加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;
}
});
},
delProduct:function(){
//
// this.productlist.indexOf(this.curProduct);
this.productlist.splice(this.index,1);
this.deFlag=false;
}
}
});
Vue.filter('money',function(value,type){
return '$' + value.toFixed(2)+type;
});
删除的实例.js
点击删除按钮要弹出那个确定框：
第一步：同样用v-bind绑定一个属性，当点击删除按钮时，deFlag=true，弹出确定框
//这是显示那个确定框的
<div class="md-modal modal-msg md-modal-transition" id="showModal" v-bind:class="{'md-show':deFlag}"> //这是删除按钮
<a href="javascript:void 0" class="item-edit-btn" @click="deFlag=true"> //在实例data中，定义了deFlag=false,当点击按钮时，deFlag=true框显示
第二步：定义和调用删除函数
//yes和no调用的是同一个函数，当传入的参数为1的时候删除，为0的时候不删除 <button class="btn btn--m" id="btnModalConfirm" @click="delProduct(1)">Yes</button>
<button class="btn btn--m btn--red" id="btnModalCancel" @click="delProduct(0)">No</button>
</div>
delProduct:function(type){
this.productlist.splice(this.index,type);
this.deFlag=false;
}
踩坑：踩坑一：在vue1.0中可以用$delete函数来直接删除
采坑二：确定框的显示，用上面的方式
地址选配
地址过滤方式渲染数据，让购物车地址默认只显示三条
new Vue({
el:'.container',
data:{
addresslist:[],
limitNum:3
},
filters:function(){
},
mounted:function(){
this.$nextTick(function(){
this.getaddresslist();
});
},
computed:{
filterAddress: function(){
return this.addresslist.slice(0,3);
}
},
methods:{
getaddresslist:function(){
var _this=this
this.$http.get('data/address.json',{'id':123}).then(function(res){
_this.addresslist=res.data.result;
});
}
}
});
默认只显示三条.js
也是用v-for渲染数据，但是与之前的有区别
//filterAddress 是有computed重新过滤的数组
<li v-for="(item,index) of filterAddress" >
<dl>
<dt>{{item.userName}}</dt>
<dd class="address">{{item.streetName}}</dd>
<dd class="tel">{{item.tel}}</dd>
</dl>
</li>
computed函数过滤
computed:{
filterAddress: function(){
//只返回数组从0-3的数据
return this.addresslist.slice(0,3);
}
},
展示更多：直接在默认显示三条的基础上将limitNum,通过loadmore函数改变
<div class="shipping-addr-more">
<a class="addr-more-btn up-down-btn" href="javascript:" @click="loadmore()">
more
<i class="i-up-down">
<i class="i-up-down-l"></i>
<i class="i-up-down-r"></i>
</i>
loadmore函数：
loadmore:function(){
return this.limitNum=this.addresslist.length;
}
设为默认地址：“设为默认地址”和“默认地址”之间是一对互斥事件，isDefault是存在数据中的数据项，
item.isDefault=false,就显示
<div class="addr-opration addr-set-default" v-if="item.isDefault">
<a href="javascript:;" class="addr-set-default-btn" @click="SetDefault(item.addressId)"><i>设为默认</i></a>
</div>
<div class="addr-opration addr-default" v-if="！item.isDefault">默认地址</div>
通过点击SetDefault()函数来实现
SetDefault:function(addressId){
//遍历
this.addresslist.forEach(function(obj,index){
//当前遍历的id是否等于我们点击的id,如果相等，就设为默认
if(obj.addressId==addressId){
obj.isDefault=true;
}else{
obj.isDefault=false;
}
});
}
配送方式的选择，也是两个互斥事件
<li v-bind:class="{'check':shippingmethod==1}" @click="shippingmethod=1">
<div class="name" >标准配送</div>
<div class="price">Free</div>
</li>
<li v-bind:class="{'check':shippingmethod==2}" @click="shippingmethod=2">
<div class="name" >高级配送</div>
<div class="price">180</div>
</li>