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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
jquery ajax请求实例深入解析
Nov 26 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
javascript模拟命名空间
Apr 17 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
关于Webpack dev server热加载失败的解决方法
Feb 22 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 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
Windows下的PHP5.0详解
2006/11/18 PHP
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP输入流php://input介绍
2012/09/18 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python简单猜数游戏实例
2015/07/09 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
详解Python self 参数
2019/08/30 Python
python输入错误后删除的方法
2019/10/12 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
售后服务经理岗位职责范本
2014/02/22 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
技术股份合作协议书
2014/10/05 职场文书
七年级作文之冬景
2019/11/07 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis