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 Array.prototype.slice使用说明
Oct 11 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
Node.js 使用AngularJS的方法示例
May 11 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
JS canvas绘制五子棋的棋盘
May 28 Javascript
JS实现前端路由功能示例【原生路由】
May 29 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
vue组件中节流函数的失效的原因和解决方法
Dec 02 Vue.js
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/04 冲泡冲煮
php反射类ReflectionClass用法分析
2016/05/12 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
微信小程序制作表格的方法
2019/02/14 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
[03:46]DAC趣味视频-中文考试.mp4
2017/04/02 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python给图像添加噪声具体操作
2019/03/03 Python
使用python实现离散时间傅里叶变换的方法
2019/09/02 Python
tensorflow 模型权重导出实例
2020/01/24 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python中get和post有什么区别
2020/06/19 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
德国电子商城:ComputerUniverse
2017/04/21 全球购物
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
手机银行营销方案
2014/03/14 职场文书
反邪教宣传工作方案
2014/05/07 职场文书
中层干部培训方案
2014/06/16 职场文书
个人自查自纠材料
2014/10/14 职场文书
接待员岗位职责范本
2015/04/15 职场文书
python tkinter实现定时关机
2021/04/21 Python
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS