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


Posted in Javascript onSeptember 10, 2020

没有展开时

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

点击展开之后

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;

   }
  }
 }

补充知识:vue 循环多个标签,点击标签变色,再点击取消,可以同时点击多个

效果如下:

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);
        }
      },

以上这篇vue循环中点击选中再点击取消(单选)的实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 数组操作代码集锦
Apr 28 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
Jan 16 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
jQuery cookie的公共方法封装和使用示例
Jun 01 jQuery
JS数组索引检测中的数据类型问题详解
Jan 11 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 #Javascript
vue使用echarts实现水平柱形图实例
Sep 09 #Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 #Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 #Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 #Javascript
Vue页面跳转传递参数及接收方式
Sep 09 #Javascript
微信小程序实现身份证取景框拍摄
Sep 09 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
如何在 JavaScript 中更好地利用数组
2018/09/27 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
Node+OCR实现图像文字识别功能
2018/11/26 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
zbar解码二维码和条形码示例
2014/02/07 Python
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
Python yield的用法实例分析
2020/03/06 Python
怎么快速自学python
2020/06/22 Python
python在CMD界面读取excel所有数据的示例
2020/09/28 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
学期自我鉴定范文
2013/10/01 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
临时租车协议范本
2014/09/23 职场文书
《叶问2》观后感
2015/06/15 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
教你使用一行Python代码玩遍童年的小游戏
2021/08/23 Python