VUE2.0实现购物车和地址选配功能学习第七节
2024-10-09 17:31:01
第七节 卡片选中,设置默认
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;
}
})
}
效果:
最新文章
- 在线教学、视频会议 Webus Fox(3) 客户端开发手册
- mysql sys table
- Sass 默认样式库
- Java 图片切圆角,消除锯齿
- k-d tree算法
- hdu5024(dp)
- 手机web——自适应网页设计(html/css控制) - 51CTO.COM
- NRF24L01无线通讯模块驱动
- LAMP学习小记
- java.IO层次体系结构
- Linux设备树(三 属性)
- js 取得当天0点 / 23:59:59 时间
- ASP.NET Core 2.1 使用Docker运行
- 通过几个例子看sed的模式空间与保持空间
- 移动端web禁止长按选择文字以及弹出菜单
- 机器学习进阶-图像基本操作-数值计算 1.cv2.add(将图片进行加和) 2.cv2.resize(图片的维度变换) 3.cv2.addWeighted(将图片按照公式进行重叠操作)
- 8.css内容移出与精灵图
- Window10中创建目录连接点
- SV中的随机化
- JAVA复习笔记:内存结构和类加载
热门文章
- 云脉推出表格识别API接口可以自助接入
- OSG和osgearth显示中文(转载)
- animate的{queue:false,duration:400}意思
- iOS 环信消息撤回
- hadoop在windows下安装运行
- Nancy简单实战之NancyMusicStore(一):准备工作和搭建项目
- vue.js环境搭建
- BZOJ-2768: [JLOI2010]冠军调查(超级裸的最小割)
- twemproxyRedis协议解析探索——剖析twemproxy代码正编
- MATLAB绘制等高线和梯度场