Vue獲取DOM元素并修改屬性的方法
Vue獲取DOM元素
Vue獲取DOM元素有兩種方法
- 直接給相應(yīng)的元素加
id,然后再使用document.getElementById("id");獲取 - 使用
ref,給相應(yīng)的元素加ref=“name”然后再使用this.$refs.name獲取到該元素
Vue獲取到元素并修改屬性或者樣式
使用上述的第二種方法，獲取到元素，然后使用this.$refs.元素元素的ref對應(yīng)的name.style.屬性名(樣式或者其他的屬性名) = “你要設(shè)置的值”或者元素的ref對應(yīng)的name.屬性名(樣式或者其他的屬性名) = “你要設(shè)置的值”``，如this.$refs.more.style.bottom = “20px”;就是將ref的name為more的元素的bottom屬性改為20px`
注意：
- 在獲取相應(yīng)元素之前，必須在mounted生命周期進行掛載，否則獲取到的值為空；
- 如果是給子組件加id并修改自定義屬性，則直接會加載該子組件對應(yīng)的外層div上，并不會改變該子組件原本的自定義屬性的值；
- 如果給子組件加ref，然后獲取到該DOM元素之后改變相應(yīng)的自定義屬性的值，vue會報錯：Avoid mutating a prop directly since the value will be overwritten whenever the parent component
vue 如何獲取并操作DOM元素
方法一： 直接給的元素加id,使用document.getElementById(“id”)獲取，然后操作 dom 元素
mounted(){
?? ?this.element = document.querySelector('#element_1');
?? ?this.element.style.color = "red";
}為什么是在mouted鉤子使用？
因為只有在執(zhí)行mounted的時候，vue才已經(jīng)渲染了dom節(jié)點，這個時候是可以獲取dom節(jié)點的
方法二： 使用ref,給元素添加ref=“name” ，使用 this.$refs.name 獲取到該元素，再對元素進行操作
// 定義ref <div ref="div_1">獲取元素</div> // 獲取并操作 this.$refs.div_1.style.backgroundColor="red"
建議：vue中盡量不去操作 dom 元素，選用 ref 操作屬性獲取
到此這篇關(guān)于Vue獲取DOM元素并修改屬性的方法的文章就介紹到這了,更多相關(guān)Vue獲取DOM元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue element-ui el-tooltip組件失效問題及解決
這篇文章主要介紹了vue element-ui el-tooltip組件失效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue相同路由跳轉(zhuǎn)強制刷新該路由組件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要給大家介紹了關(guān)于vscode下vue項目中eslint的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
vue3+ElementPlus封裝函數(shù)式彈窗組件詳解
這篇文章主要為大家詳細(xì)介紹了如何利用vue3和ElementPlus封裝函數(shù)式彈窗組件，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2023-08-08
今天小編就為大家分享一篇淺談vue-router路由切換 組件重用挖下的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中this.$http.post()跨域和請求參數(shù)丟失的解決
這篇文章主要介紹了vue中this.$http.post()跨域和請求參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue?中使用?bimface詳情,分別有安裝?vue?腳手架、創(chuàng)建項目、引入?bimface?響應(yīng)的文件、修改?App.vue?文件，實現(xiàn)頁面渲染等步驟，需要的小伙伴可以參考一下2021-12-12
在vue中實現(xiàn)表單驗證碼與滑動驗證功能的代碼詳解
在Web應(yīng)用程序中，表單驗證碼和滑動驗證是常見的安全機制，用于防止惡意攻擊和機器人攻擊，本文將介紹如何使用Vue和vue-verify-code庫來實現(xiàn)表單驗證碼和滑動驗證功能,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue組件實現(xiàn)列表自動無限循環(huán)的方法
最近剛好有個功能需要實現(xiàn)列表的無限循環(huán)滾動,這篇文章主要給大家介紹了關(guān)于vue組件實現(xiàn)列表自動無限循環(huán)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11