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 相关文章推荐
验证用户是否修改过页面的数据的实现方法
Sep 26 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
Dec 18 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
PHP和XSS跨站攻击的防范
2007/04/17 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
基于JQuery的cookie插件
2010/04/07 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
js触发onchange事件的方法说明
2014/03/08 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
JavaScript惰性载入函数实例分析
2019/03/27 Javascript
jQuery属性选择器用法实例分析
2019/06/28 jQuery
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
2019/09/26 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python pygame实现2048游戏
2018/11/20 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
点菜员岗位职责范本
2014/02/14 职场文书
知识竞赛活动方案
2014/02/18 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
物理课外活动总结
2014/08/27 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
行为规范主题班会
2015/08/13 职场文书
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle