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