v-for循环中，每个块的点击事件互不影响

最新推荐文章于 2023-07-24 10:13:42 发布

原创最新推荐文章于 2023-07-24 10:13:42 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

笔记专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种通过按钮切换课程详情显示与隐藏的方法。利用特定的条件判断，实现课程简介的展开与折叠效果，增强了用户体验。

 <view class="scroll-texts">
								 	<scroll-view scroll-y="true" class="scroll-Y none_dis" :class="(index == btn_num && btn_tag == false) ? 'div_dis' : 'none_dis'">
								 		 <view class="scroll-text">
								 		 	{{item.course.course_profile}}
								 		 </view>
								 	</scroll-view>
									<view class="scroll-Yed" :class="((index == btn_num && btn_tag == true) || (btn_num == -1 && btn_tag == true)) ? 'div_dis' : 'none_dis'">
										{{item.course.course_profile}}
									</view>
									<view class="scroll-btn flexcenter" @tap.stop="openBtn(index)">
										<view class="scroll-btn-text">
											{{((index == btn_num && btn_tag == true) || (btn_num == -1 && btn_tag == true)) ? '详情' : '收起'}}
										</view>
										<view class="scroll-btn-img">
											<image :src="((index == btn_num && btn_tag == true) || (btn_num == -1 && btn_tag == true)) ? '/static/sign-up/open.png' : '/static/sign-up/close.png'" mode=""></image>
										</view>
									</view>