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 类
Nov 07 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 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多种序列化与反序列化的方法
2013/06/06 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
javascript 闭包
2011/09/15 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
js字符串操作方法实例分析
2015/05/06 Javascript
js实现交通灯效果
2017/01/13 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
JavaScript调用模式与this关键字绑定的关系
2018/04/21 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
非功能性需求都包括哪些方面
2013/10/29 面试题
自考自我鉴定范文
2013/10/30 职场文书
客服专员岗位职责范本
2013/11/29 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
生产部统计员岗位职责
2014/01/05 职场文书
韩国商务邀请函
2014/01/14 职场文书
优秀教师先进事迹
2014/01/22 职场文书
学校消防安全制度
2014/01/30 职场文书
大学生的创业计划书就该这么写
2014/01/30 职场文书
教师节活动总结
2014/08/29 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python