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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
Javascript常考语句107条收集
Mar 09 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
详解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
自动跳转中英文页面
2006/10/09 PHP
如何用php获取文件名后缀
2013/06/09 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
javscript对象原型的一些看法
2010/09/19 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
jQuery实现form表单元素序列化为json对象的方法
2015/12/09 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
Vue 动态组件与 v-once 指令的实现
2019/02/12 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
python实现简易云音乐播放器
2018/01/04 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python redis存入字典序列化存储教程
2020/07/16 Python
虚拟机下载python是否需要联网
2020/07/27 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
单位介绍信范文
2014/01/18 职场文书
小加工厂管理制度
2014/01/21 职场文书
甲午大海战观后感
2015/06/02 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android
SpringBoot详解执行过程
2022/07/15 Java/Android