快捷導(dǎo)航

vue如何判斷dom的class

更新時(shí)間：2018年04月26日 10:30:54 作者：vxy1142296352

這篇文章主要介紹了vue如何判斷dom的class,vue點(diǎn)擊給dom添加class然后獲取含有class的dom文件，具體內(nèi)容詳情大家參考下本文

vue點(diǎn)擊給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])
          }
        }
      }
      
    }

點(diǎn)擊過后獲取到的dom打印

if(children[j].className=="check")

加了判斷為什么打印出來的dom是點(diǎn)擊之前的dom

總結(jié)

以上所述是小編給大家介紹的vue如何判斷dom的class，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue+Websocket簡單實(shí)現(xiàn)聊天功能
這篇文章主要為大家詳細(xì)介紹了Vue+Websocket簡單實(shí)現(xiàn)聊天功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表（1）
這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-06-06
vue路由緩存的幾種實(shí)現(xiàn)方式小結(jié)
這篇文章主要介紹了vue路由緩存的幾種實(shí)現(xiàn)方式,結(jié)合實(shí)例形式詳細(xì)分析了vue.js路由緩存常見實(shí)現(xiàn)方式、使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2020-02-02
vue子父組件通信的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue子父組件通信的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-07-07
Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解
這篇文章主要介紹了Vue的route-view子頁面調(diào)用父頁面的函數(shù)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue項(xiàng)目如何引入bootstrap、elementUI、echarts
這篇文章主要介紹了Vue項(xiàng)目如何引入bootstrap、elementUI、echarts,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-11-11
詳解Vue中是如何實(shí)現(xiàn)cache緩存的
這篇文章分享一個(gè)比較有意思的東西，那就是Vue中如何實(shí)現(xiàn)cache緩存的，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-07-07
簡單聊聊Vue中的ref,toRef與toRefs
這篇文章主要是想和大家來簡單聊聊Vue中的ref、toRef、toRefs這三個(gè)函數(shù)的使用與區(qū)別，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2023-04-04
使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼
今天小編就為大家分享一篇使用Vue調(diào)取接口,并渲染數(shù)據(jù)的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
解決vue多層彈框時(shí)存在遮擋問題
本文給大家介紹vue多層彈框時(shí)存在遮擋問題，解決思路首先想到的是找到對(duì)應(yīng)的遮擋層的css標(biāo)簽，然后修改z-index值，但是本思路只能解決首次問題，再次打開還會(huì)存在相同的問題，故該思路錯(cuò)誤，下面給大家?guī)硪环N正確的思路，一起看看吧
2022-03-03