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 相关文章推荐
JavaScript高级程序设计 阅读笔记(二十) js错误处理
Aug 14 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
JavaScript 面向对象编程(1) 基础
2010/05/18 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
JQuery异步加载无限下拉框级联功能实现示例
2014/02/19 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
Python下的subprocess模块的入门指引
2015/04/16 Python
Python lxml模块安装教程
2015/06/02 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
python3字符串输出常见面试题总结
2020/12/01 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
英国电信商店:BT Shop
2019/12/17 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
公证委托书大全
2014/04/04 职场文书
毕业寄语大全
2014/04/09 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
会议营销主持词
2015/07/03 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python