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中继承的多种方式
Feb 19 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
vue-hook-form使用详解
Apr 07 Javascript
js微信分享实现代码
Oct 11 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
react实现复选框全选和反选组件效果
Aug 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
PHP中文汉字验证码
2007/04/08 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
2011/10/24 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python strip()函数 介绍
2013/05/24 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
性能测试工程师的面试题
2015/02/20 面试题
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
简历中自我评价范文3则
2013/12/14 职场文书
文化活动实施方案
2014/03/28 职场文书
董事长助理工作职责
2014/06/08 职场文书
四风问题查摆材料
2014/08/25 职场文书
高中运动会广播稿
2014/09/16 职场文书
2014年党员自我评价材料
2014/09/22 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
销售经理岗位职责
2015/01/31 职场文书
爱心捐款活动总结
2015/05/09 职场文书