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 相关文章推荐
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
Mar 25 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
Javascript文本框脚本实现方法解析
Oct 30 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
php遍历目录viewDir函数
2009/12/15 PHP
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
js 返回时间戳所对应的具体时间
2010/07/20 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
2016/09/08 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
JS利用prototype给类添加方法操作详解
2019/06/21 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python连接Redis的基本配置方法
2018/09/13 Python
详解Python对JSON中的特殊类型进行Encoder
2019/07/15 Python
windows支持哪个版本的python
2020/07/03 Python
python实现简单的学生管理系统
2021/02/22 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
大二自我鉴定范文
2013/10/05 职场文书
大学生蛋糕店创业计划书
2014/01/13 职场文书
期终自我鉴定
2014/02/17 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
班主任经验交流材料
2014/12/16 职场文书
中标通知书格式
2015/04/17 职场文书
工作自我评价范文
2019/03/21 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
使用Redis实现实时排行榜功能
2021/07/02 Redis