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)擊過(guò)后獲取到的dom打印
if(children[j].className=="check")
加了判斷為什么打印出來(lái)的dom是點(diǎn)擊之前的dom
總結(jié)
以上所述是小編給大家介紹的vue如何判斷dom的class，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue3時(shí)間軸組件問(wèn)題記錄(時(shí)間信息收集組件)
本文介紹了如何在Vue3項(xiàng)目中封裝一個(gè)時(shí)間信息收集組件,采用雙向綁定響應(yīng)式數(shù)據(jù),通過(guò)對(duì)Element-Plus的Slider組件二次封裝,實(shí)現(xiàn)時(shí)間軸功能,解決了小數(shù)計(jì)算導(dǎo)致匹配問(wèn)題和v-model綁定組件無(wú)效問(wèn)題,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要介紹了vue-router子路由的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
今天封裝一個(gè)導(dǎo)航欄的組件,使用的Element的NavMenu組件。遇到一個(gè)問(wèn)題，本文主要介紹了Element el-menu中NavMenu的用法，感興趣的可以了解一下2023-04-04
vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用示例
在Vue3中要獲取子組件的DOM節(jié)點(diǎn),你可以使用ref來(lái)引用子組件,然后通過(guò)$refs來(lái)訪問(wèn)子組件的DOM,下面這篇文章主要給大家介紹了關(guān)于vue中ref和$refs獲取元素dom、獲取子組件數(shù)據(jù)與方法調(diào)用的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue 使用 echarts 繪制中國(guó)地圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 使用 echarts 繪制中國(guó)地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
這篇文章主要給大家介紹了關(guān)于vue圖片懶加載代碼實(shí)現(xiàn)的相關(guān)資料,所謂圖片懶加載是指當(dāng)我們?yōu)g覽頁(yè)面時(shí),只加載我們?yōu)g覽器可視區(qū)的圖片,向下滾動(dòng)時(shí)再繼續(xù)加載后面的圖片,需要的朋友可以參考下2023-07-07
vue 實(shí)現(xiàn)無(wú)規(guī)則截圖
這篇文章主要介紹了vue 實(shí)現(xiàn)無(wú)規(guī)則截圖的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
Vue3使用hook封裝媒體查詢和事件監(jiān)聽(tīng)的代碼示例
這篇文章主要給大家詳細(xì)介紹Vue3如何使用hook封裝媒體查詢和事件監(jiān)聽(tīng)，使得Vue的開(kāi)發(fā)更加絲滑，文中通過(guò)代碼示例給大家介紹的非常詳細(xì)，感興趣的同學(xué)跟著小編一起來(lái)學(xué)習(xí)吧2023-07-07
這篇文章主要為大家詳細(xì)介紹了Vue3中useLocalStorage用法的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解一下2023-10-10
Vue金融數(shù)字格式化(并保留小數(shù))數(shù)字滾動(dòng)效果實(shí)現(xiàn)
這篇文章主要介紹了Vue金融數(shù)字格式化(并保留小數(shù)) 數(shù)字滾動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04