vue如何獲取指定元素
更新時(shí)間：2022年04月20日 10:49:26 作者：MrLi-2018
這篇文章主要介紹了vue如何獲取指定元素，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
如何獲取指定元素
在想要獲取元素上添加“ref” ref="scroll" scroll為函數(shù)名
<div ref="scroll">vue獲取指定元素</div>
?xiaFn:function(){
? ? console.log(this.$refs.scroll)
?}點(diǎn)擊獲取相應(yīng)元素
在vue中通過(guò)點(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)文章
基于axios封裝fetch方法及調(diào)用實(shí)例
下面小編就為大家分享一篇基于axios封裝fetch方法及調(diào)用實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了Vue中的父子組件傳值及傳方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue在前端技術(shù)中使用越來(lái)越多，也成為了主流框架，今天咱花點(diǎn)時(shí)間學(xué)習(xí)下Vue與element-ui整合方式，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04
Vue.use與Vue.prototype的區(qū)別及說(shuō)明
這篇文章主要介紹了Vue.use與Vue.prototype的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue實(shí)現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
詳解IOS微信上Vue單頁(yè)面應(yīng)用JSSDK簽名失敗解決方案
這篇文章主要介紹了詳解IOS微信上Vue單頁(yè)面應(yīng)用JSSDK簽名失敗解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
過(guò)濾器(Filters)是 vue 為開(kāi)發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調(diào)用過(guò)濾器,需要的朋友可以參考下2023-09-09
vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽(tīng)到數(shù)據(jù)的改變以及不同之處,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
vue實(shí)現(xiàn)自定義公共組件及提取公共的方法
這篇文章主要介紹了vue實(shí)現(xiàn)自定義公共組件及提取公共的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05