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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
js 动态选中下拉框
Nov 26 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
js实现微信聊天效果
Aug 09 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代码运行时间查看类代码分享
2011/08/06 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
JavaScript表单通过正则表达式验证电话号码
2014/03/14 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
JS实现全屏的四种写法
2016/12/30 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
python实现Adapter模式实例代码
2018/02/09 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
django+mysql的使用示例
2018/11/23 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
巴西宠物商店:Cobasi
2019/04/19 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
前台文员岗位职责及工作流程
2013/11/19 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
优秀实习生感言
2014/03/01 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
运动会的口号
2014/06/09 职场文书
单位员工收入证明样本
2014/10/09 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技