vue如何判断dom的class


Posted in Javascript onApril 26, 2018

vue点击给dom添加class然后获取含有class的dom

<div class="chose-ck" v-for="(item,index2) in colors" :key="index2" ref="chosebox">

                  <p>{{item.name}}</p>
                  <dt v-for="(item2,index) in item.childsCurGoods" :key="item2.id" :class="index==iac[index2]?'check':''" :id="item2.id" :data-chosename="item.name" :data-choseidname="item2.name" :data-chose="item.id" :data-id="item2.id" @click="chek(index2,index)" >
                    {{item2.name}}
                  </dt>
                </div>js
  chek(index2, index) {
      this.iac[index2] = index
      this.iac = this.iac.concat([]);
      this.checkchose()
    },
    checkchose:function(){
      var chose=this
      var chosedom=chose.$refs.chosebox
      console.log(chosedom)
      for (var i=0;i<chosedom.length;i++) {
        var children=chosedom[i].children
        for (var j=0;j<children.length;j++) {  
          if(children[j].className=="check")
          {
            console.log(children[j])
          }
        }
      }
      
    }

点击过后获取到的dom打印

vue如何判断dom的class

if(children[j].className=="check")

加了判断为什么打印出来的dom是点击之前的dom

vue如何判断dom的class

总结

以上所述是小编给大家介绍的vue如何判断dom的class,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
jquery 选取方法都有哪些
May 18 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
JavaScript用二分法查找数据的实例代码
Jun 17 Javascript
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
小程序如何自主实现拦截器的示例代码
Nov 04 Javascript
vue 中filter的多种用法
Apr 26 #Javascript
vue自定义filters过滤器
Apr 26 #Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 #Javascript
react 创建单例组件的方法
Apr 26 #Javascript
node打造微信个人号机器人的方法示例
Apr 26 #Javascript
Vue 使用中的小技巧
Apr 26 #Javascript
基于Vue实现拖拽功能
Jul 29 #Javascript
You might like
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
python实现微信打飞机游戏
2020/03/24 Python
对python中list的五种查找方法说明
2020/07/13 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
介绍一下write命令
2014/08/10 面试题
总经理文秘岗位职责
2014/02/03 职场文书
个人培训自我鉴定
2014/03/28 职场文书
毕业证委托书范文
2014/09/26 职场文书
大二学生自我检讨书
2014/10/23 职场文书
质量整改通知单
2015/04/21 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android
解决Redis启动警告问题
2022/02/24 Redis
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python