首页 > 其他 > 详细

VUE2.0实现购物车和地址选配功能学习第七节

时间:2017-02-26 17:44:06      阅读:236      评论:0      收藏:0      [点我收藏+]

第七节 卡片选中,设置默认

1.卡片选中
html:
<li v-for="(item,index) in filterAddress" v-bind:class="{‘check‘:index==currentIndex}" @click="currentIndex=index">
<!--循环判断currenIndex,控制当前选中卡片的样式-->
js:
data:{
currentIndex:0,
},
2.设置默认
html:
<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>
js:
setDefault: function (addressId) {
this.addressList.forEach(function (address,index) {
if(address.addressId==addressId){
address.isDefault=true;
}else{
address.isDefault=false;
}
})
}
效果:
技术分享

 

 

VUE2.0实现购物车和地址选配功能学习第七节

原文:http://www.cnblogs.com/zhus/p/6444965.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!