vue循环中点击选中再点击取消(单选)

没有展开时
在这里插入图片描述
点击展开之后
在这里插入图片描述

<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;

            }
        }
    }
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值