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