vue判断dom的class

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打印
图片描述

if(children[j].className=="check")
加了判断为什么打印出来的dom是点击之前的dom
图片描述

阅读 6.7k
3 个回答

html绑定的事件一个参数加上事件对象$event,js方法第一个参数写成event,通过event.target.className获取点击的那个的class

在绑定事件的地方 这样写 @click="fun(this)"
js `fun(e){
consoloe.log(e.target.className)//这e就代表你点击当前按钮
}`

vue是reactive的,用了vue就避免操作dom,绑定数据到dom上,通过修改数据修改dom,如果直接操作dom就完全抛弃了最大的优势。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进