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高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
jquery实现弹出层效果实例
May 19 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
详解javascript new的运行机制
Jan 26 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
js代码实现轮播图
May 04 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
Windows下PHP的任意文件执行漏洞
2006/10/09 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
Laravel5.7 Eloquent ORM快速入门详解
2019/04/12 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
详解vue-router 初始化时做了什么
2018/06/11 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
python编写计算器功能
2019/10/25 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
俄罗斯三星品牌商店:GalaxyStore
2020/11/04 全球购物
幼儿园教师教学反思
2014/02/06 职场文书
小学信息技术教学反思
2014/02/10 职场文书
见习报告格式范文
2014/11/08 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
单位政审意见范文
2015/06/04 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js