vue循环中点击选中再点击取消(单选)的实现
作者:Archer_yy 时间:2024-05-13 09:43:50
没有展开时
点击展开之后
<div class="flashread_item_box_time">
<span class="moment_time">9分钟前</span>
<div class="flashread_item_box_zan">
<span class="flashread_item_box_item"><i class="iconfont icon-changyongtubiao-mianxing-"></i>10</span>
<span class="flashread_item_box_item" @click="tocomment(index)"><i class="iconfont icon-pinglun" :class="{showcolor:currentTab==index}"></i>10</span>
</div>
</div>
<div class="comment_textareabox" :class="{'showcomment':currentTab==index}">
<div class="textarea_com">
<textarea placeholder="你来谈谈?" class="comment_textarea" v-on:input="change" v-model="comment"></textarea>
<button class="btn_comment" :class="{'showcolor':showcombtn}">发表</button>
</div>
</div>
data(){
return{
currentTab:-1,
flashreadlists:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
showcombtn:false,
comment:''
}
},
methods:{
change(){
if(this.comment.length>=1){
this.showcombtn=true
}else{
this.showcombtn=false
}
},
tocomment(index){
if(index!=this.currentTab){
this.currentTab = index;
}else{
this.currentTab = -1;
}
}
}
补充知识:vue 循环多个标签,点击标签变色,再点击取消,可以同时点击多个
效果如下:
1.
<div class="relFacilityTitcon">
<i v-for="(item,index) in facilityList" :key="index" @click="changeSpan(index);" :class="{'bgcolor':spanIndex.indexOf(index)>-1}" >{{item}}</i>
</div>
2.
.padding .relWarp .relFacility .relFacilityTitcon {
/* border: 1px solid red; */
/* line-height: 20px; */
padding: 0 .24rem;
font-size :10px;
}
.padding .relWarp .relFacility .relFacilityTitcon i {
/* height:20px; */
display: inline-block;
/* margin: 0 5px; */
height: 20px;
line-height: 20px;
padding: 0 .16rem;
/* width: auto; */
font-size: 10px;
color: #97979f;
border-radius: 5px;
border: 1px solid #97979f;
margin-right: 10px;
margin-top: 10px;
font-style: normal;
/* padding:1px 7px; */
/* display: inline-block; */
}
.padding .relWarp .relFacility .relFacilityTitcon .bgcolor {
border: 1px solid orange;
color: orange;
}
.padding .relWarp .relFacility .relFacilityTitcon i:last-child {
margin-right: 0;
}
3.
methods: {
changeSpan(index){
let arrIndex = this.spanIndex.indexOf(index);
// console.log(arrIndex);
if(arrIndex>-1){
this.spanIndex.splice(arrIndex,1);
}else{
this.spanIndex.push(index);
}
},
来源:https://blog.csdn.net/Dilemma_me/article/details/101543177
标签:vue,点击,取消,选中
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
tensorflow多维张量计算实例
2022-02-05 00:43:48
![](https://img.aspxhome.com/file/2023/8/70198_0s.jpg)
解决tensorflow 释放图,删除变量问题
2023-08-10 09:42:47
mysql登录报错提示:ERROR 1045 (28000)的解决方法
2024-01-24 04:54:01
golang实现微信支付v3版本的方法
2024-04-26 17:24:45
GitHub Eclipse配置使用教程详解
2023-11-04 10:23:02
![](https://img.aspxhome.com/file/2023/4/109524_0s.png)
解决Can't find variable: SockJS vue项目的问题
2024-04-27 16:07:50
IE6局部调用PNG32合并图片
2009-03-11 21:24:00
![](https://img.aspxhome.com/file/UploadPic/20093/11/01-12s.jpg)
Python用threading实现多线程详解
2021-06-19 13:35:48
Python 常用string函数详解
2021-01-27 02:59:54
python实现对服务器脚本敏感信息的加密解密功能
2022-11-07 08:35:11
连接MySQL时出现1449与1045异常解决办法
2024-01-16 14:07:02
Go实现线程池(工作池)的两种方式实例详解
2024-05-21 10:31:41
![](https://img.aspxhome.com/file/2023/8/123918_0s.png)
Python数据挖掘中常用的五种AutoEDA 工具总结
2022-05-20 02:49:51
![](https://img.aspxhome.com/file/2023/3/102853_0s.png)
mysql 服务意外停止1067错误解决办法小结
2024-01-26 05:56:38
![](https://img.aspxhome.com/file/2023/7/112877_0s.gif)
对numpy中array和asarray的区别详解
2022-06-26 04:40:12
用 python 进行微信好友信息分析
2022-03-29 15:52:44
![](https://img.aspxhome.com/file/2023/1/121381_0s.png)
Python多进程编程常用方法解析
2022-06-06 17:23:34
聊聊Python中关于a=[[]]*3的反思
2021-09-08 05:12:46
![](https://img.aspxhome.com/file/2023/7/99257_0s.png)
HTTP请求 GET与POST方法的区别
2023-07-26 12:46:35
Go语言针对Map的11问你知道几个?
2024-05-05 09:33:19