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)文章
基于vue與element實現(xiàn)創(chuàng)建試卷相關(guān)功能(實例代碼)
這篇文章主要介紹了基于vue與element實現(xiàn)創(chuàng)建試卷相關(guān)功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
Vue實現(xiàn)手機號、驗證碼登錄（60s禁用倒計時）
這篇文章主要介紹了Vue實現(xiàn)手機號、驗證碼登錄（60s禁用倒計時），幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-03-03
詳解vue3.2新增的defineCustomElement底層原理
本文主要介紹了vue3.2新增的defineCustomElement底層原理，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼
這篇文章主要介紹了element-ui表格數(shù)據(jù)轉(zhuǎn)換的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
今天小編就為大家分享一篇vue點擊自增和求和的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue-resourse將json數(shù)據(jù)輸出實例
這篇文章主要為大家詳細介紹了vue-resourse將json數(shù)據(jù)輸出實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
el-form表單el-form-item label不換行問題及解決
這篇文章主要介紹了el-form表單el-form-item label不換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
elementPlus?的el-select在提示框關(guān)閉時自動彈出的問題解決
這篇文章主要介紹了elementPlus?的el-select在提示框關(guān)閉時自動彈出閉時自動彈出的問題,主要問題就是因為filterable屬性,根本解決方案是選中的時候讓他失去焦點?el-select有一個visible-change事件,下拉框出現(xiàn)/隱藏時觸發(fā),感興趣的朋友跟隨小編一起看看吧2024-01-01