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)
?}

點擊獲取相應元素

在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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

基于axios封裝fetch方法及調用實例
下面小編就為大家分享一篇基于axios封裝fetch方法及調用實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue中this.$nextTick()的具體使用
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
Vue中的父子組件傳值及傳方法
這篇文章主要介紹了Vue中的父子組件傳值及傳方法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
詳解Vue與element-ui整合方式
vue在前端技術中使用越來越多，也成為了主流框架，今天咱花點時間學習下Vue與element-ui整合方式，本文結合示例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2022-04-04
Vue.use與Vue.prototype的區(qū)別及說明
這篇文章主要介紹了Vue.use與Vue.prototype的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
vue實現(xiàn)登錄功能
這篇文章主要介紹了vue實現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
詳解IOS微信上Vue單頁面應用JSSDK簽名失敗解決方案
這篇文章主要介紹了詳解IOS微信上Vue單頁面應用JSSDK簽名失敗解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-11-11
在Vue中定義和調用過濾器的方法
過濾器(Filters)是 vue 為開發(fā)者提供的功能，常用于文本的格式化，這篇文章主要介紹了如何在Vue中定義和調用過濾器,需要的朋友可以參考下
2023-09-09
vue中watch和computed為什么能監(jiān)聽到數(shù)據(jù)的改變以及不同之處
這篇文章主要介紹了vue中watch和computed為什么能監(jiān)聽到數(shù)據(jù)的改變以及不同之處,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-12-12
vue實現(xiàn)自定義公共組件及提取公共的方法
這篇文章主要介紹了vue實現(xiàn)自定義公共組件及提取公共的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05