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 13 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
AngularJS入门教程之更多模板详解
Aug 19 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
Sep 02 Javascript
js用类封装pop弹窗组件
Oct 08 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
Vue中控制v-for循环次数的实现方法
Sep 26 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
paypal即时到账php实现代码
2010/11/28 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
百度判断手机终端并自动跳转js代码及使用实例
2014/06/11 Javascript
JavaScript导出Excel实例详解
2014/11/25 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
js原生之焦点图转换加定时器实例
2016/12/12 Javascript
详解jQuery中的事件
2016/12/14 Javascript
详解VUE 定义全局变量的几种实现方式
2017/06/01 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
python基础教程之获取本机ip数据包示例
2014/02/10 Python
Python中关键字is与==的区别简述
2014/07/31 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python中urlparse模块介绍与使用示例
2017/11/19 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
Flask处理Web表单的实现方法
2021/01/31 Python
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
知识竞赛主持词
2014/03/26 职场文书
员工安全责任书范本
2014/07/24 职场文书
倡议书格式及范文
2015/04/29 职场文书
小学入学感言
2015/08/01 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技