vue如何獲取指定元素
更新時(shí)間：2022年04月20日 10:49:26 作者：MrLi-2018
這篇文章主要介紹了vue如何獲取指定元素，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
如何獲取指定元素
在想要獲取元素上添加“ref” ref="scroll" scroll為函數(shù)名
<div ref="scroll">vue獲取指定元素</div>
?xiaFn:function(){
? ? console.log(this.$refs.scroll)
?}點(diǎn)擊獲取相應(yīng)元素
在vue中通過點(diǎn)擊事件獲取上一個(gè)標(biāo)簽、父標(biāo)簽、第一個(gè)子標(biāo)簽等元素。
以下元素都是以所點(diǎn)擊的元素進(jìn)行查找
e.target獲取當(dāng)前點(diǎn)擊的元素e.currentTarget獲取綁定事件的元素e.currentTarget.previousElementSibling獲取前(上)一個(gè)元素e.currentTarget.parentElement獲取父元素e.currentTarget.firstElementChild獲取第一個(gè)子元素e.currentTarget.nextElementSibling獲取后(下)一個(gè)元素e.currentTarget.getAttributeNode('class')獲得點(diǎn)擊元素的class屬性
<div class="box_home"> ? box_home ? <div class="box_pre">box_pre</div> ? <div class="box" @click="eleclick($event)"> ? ? <div class="box_item">box_item</div> ? ? <div class="box_item2">box_item2</div> ? </div> ? <div class="box_next">box_next</div> </div>
eleclick(e){
? console.log("當(dāng)前點(diǎn)擊的元素");
? console.log(e.target);
? console.log("上一個(gè)標(biāo)簽");
? console.log(e.currentTarget.previousElementSibling);
? console.log("父標(biāo)簽");
? console.log(e.currentTarget.parentElement);
? console.log("第一個(gè)子標(biāo)簽");
? console.log(e.currentTarget.firstElementChild);
? console.log("下一個(gè)標(biāo)簽");
? console.log(e.currentTarget.nextElementSibling);
? console.log("綁定事件的標(biāo)簽");
? console.log(e.currentTarget);
? console.log("獲得點(diǎn)擊元素的class屬性");
? console.log(e.currentTarget.getAttributeNode('class'));
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能(實(shí)例代碼)
這篇文章主要介紹了基于vue與element實(shí)現(xiàn)創(chuàng)建試卷相關(guān)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
Vue實(shí)現(xiàn)手機(jī)號、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)）
這篇文章主要介紹了Vue實(shí)現(xiàn)手機(jī)號、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)），幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
詳解vue3.2新增的defineCustomElement底層原理
本文主要介紹了vue3.2新增的defineCustomElement底層原理，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼
這篇文章主要介紹了element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
今天小編就為大家分享一篇vue點(diǎn)擊自增和求和的實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-resourse將json數(shù)據(jù)輸出實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue-resourse將json數(shù)據(jù)輸出實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
el-form表單el-form-item label不換行問題及解決
這篇文章主要介紹了el-form表單el-form-item label不換行問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出的問題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時(shí)自動(dòng)彈出閉時(shí)自動(dòng)彈出的問題,主要問題就是因?yàn)閒ilterable屬性,根本解決方案是選中的時(shí)候讓他失去焦點(diǎn)?el-select有一個(gè)visible-change事件,下拉框出現(xiàn)/隱藏時(shí)觸發(fā),感興趣的朋友跟隨小編一起看看吧2024-01-01