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 学习笔记(四)
Dec 31 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
js+css3实现旋转效果
Jan 20 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
原生js实现3D轮播图
Mar 21 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 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
咖啡的植物学知识
2021/03/03 咖啡文化
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
PHP如何使用Memcached
2016/04/05 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
JQuery小知识
2010/10/15 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
2013/12/31 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python中使用mysql数据库详细介绍
2015/03/27 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Pyecharts 动态地图 geo()和map()的安装与用法详解
2020/03/25 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
小区门卫岗位职责范本
2014/08/24 职场文书
起诉书格式范文
2015/05/20 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
心理学培训心得体会
2016/01/22 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python