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