Vue獲取DOM元素并修改屬性的方法
Vue獲取DOM元素
Vue獲取DOM元素有兩種方法
- 直接給相應的元素加
id,然后再使用document.getElementById("id");獲取 - 使用
ref,給相應的元素加ref=“name”然后再使用this.$refs.name獲取到該元素
Vue獲取到元素并修改屬性或者樣式
使用上述的第二種方法，獲取到元素，然后使用this.$refs.元素元素的ref對應的name.style.屬性名(樣式或者其他的屬性名) = “你要設(shè)置的值”或者元素的ref對應的name.屬性名(樣式或者其他的屬性名) = “你要設(shè)置的值”``，如this.$refs.more.style.bottom = “20px”;就是將ref的name為more的元素的bottom屬性改為20px`
注意：
- 在獲取相應元素之前，必須在mounted生命周期進行掛載，否則獲取到的值為空；
- 如果是給子組件加id并修改自定義屬性，則直接會加載該子組件對應的外層div上，并不會改變該子組件原本的自定義屬性的值；
- 如果給子組件加ref，然后獲取到該DOM元素之后改變相應的自定義屬性的值，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)文章
前端儲存之localStrage、sessionStrage和Vuex使用
localStorage、sessionStorage和Vuex是三種不同的客戶端存儲方式,用于在瀏覽器中保存數(shù)據(jù),localStorage和sessionStorage都是以鍵值對的形式存儲數(shù)據(jù),但localStorage存儲的數(shù)據(jù)在關(guān)閉瀏覽器后仍然存在2025-01-01
解決vue.js提交數(shù)組時出現(xiàn)數(shù)組下標的問題
今天小編就為大家分享一篇解決vue.js提交數(shù)組時出現(xiàn)數(shù)組下標的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue中如何給el-table-column添加指定列的點擊事件
elementui中提供了點擊行處理事件,下面這篇文章主要給大家介紹了關(guān)于vue中如何給el-table-column添加指定列的點擊事件,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-11-11
vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄及解決方法
這篇文章主要介紹了vue使用Echarts設(shè)置數(shù)據(jù)無效問題記錄,本文通過場景分析給大家分享解決方法，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue切換div顯示隱藏,多選，單選代碼解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
Vue結(jié)合SignalR實現(xiàn)前后端實時消息同步
這篇文章主要為大家詳細介紹了Vue結(jié)合SignalR實現(xiàn)前后端實時消息同步，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案
在vuex的時候刷新以后里面存儲的state就會被瀏覽器釋放掉,因為我們的state都是存儲在內(nèi)存中的,所以一刷新頁面就會把state中的數(shù)據(jù)重置,這就涉及到vue數(shù)據(jù)持久化的問題,這篇文章主要給大家介紹了關(guān)于vuex數(shù)據(jù)持久化的兩種實現(xiàn)方案,需要的朋友可以參考下2021-07-07
今天小編就為大家分享一篇vue首次賦值不觸發(fā)watch的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在開發(fā)前端應用時,地圖選擇器是一個非常常見的需求,本文將一步步展示如何使用?Vue?3?和?Element?Plus?來實現(xiàn)一個百度地圖位置選擇器組件,有需要的可以參考一下2025-04-04
Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)
這篇文章主要介紹了Vue動態(tài)擴展表頭的表格及數(shù)據(jù)方式(數(shù)組嵌套對象)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03