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 相关文章推荐
在视频前插入广告
Nov 20 Javascript
js的with语句使用方法
Sep 21 Javascript
JavaScript实现动态增加文件域表单
Feb 12 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
input标签内容改变的触发事件介绍
Jun 18 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
Angular脚手架开发的实现步骤
Apr 09 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 screw加密php源代码
2013/06/20 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
JQuery实现图片轮播效果
2017/05/08 jQuery
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
layui中select,radio设置不生效的解决方法
2019/09/05 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python中sets模块的用法实例
2014/09/30 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python使用wget实现下载网络文件功能示例
2018/05/31 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
详解Python:面向对象编程
2019/04/10 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
教师自我评价范例
2013/09/24 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
优秀团员自我评价
2015/03/10 职场文书
郭明义电影观后感
2015/06/08 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
python实现双链表
2022/05/25 Python