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 相关文章推荐
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
动态标签 悬停效果 延迟加载示例代码
Nov 21 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
js实现div弹出层的方法
Nov 20 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JQuery validate插件验证用户注册信息
May 11 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
vue里input根据value改变背景色的实例
Sep 29 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
PHP输出时间差函数代码
2013/01/28 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
python 默认参数问题的陷阱
2016/02/29 Python
python脚本替换指定行实现步骤
2017/07/11 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
python交互式图形编程实例(一)
2017/11/17 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python实现飞机大战
2018/09/11 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
公司道歉信范文
2014/01/09 职场文书
优秀村官事迹材料
2014/01/10 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
产品质量承诺书范文
2014/03/27 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
运动会闭幕词
2015/01/28 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
vue实现在data里引入相对路径
2022/06/05 Vue.js