vue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法
更新時間：2017年09月30日 08:50:05 作者：蓓蕾心晴
下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
這里我想到了2個方法：
方法一：
直接給相應(yīng)的元素加id,然后再document.getElementById("id");獲取，然后設(shè)置相應(yīng)屬性或樣式
方法二：
使用ref,給相應(yīng)的元素加ref=“name” 然后再this.$refs.name獲取到該元素
注意：在獲取相應(yīng)元素之前，必須在mount鉤子進(jìn)行掛載，否則獲取到的值為空，
如果是給子組件加id并修改自定義屬性，則直接會加載改子組件對應(yīng)的外層div上，并不會改變該子組件原本的自定義屬性的值
如果給子組件加ref,然后獲取到該DOM元素之后改變相應(yīng)的自定義屬性的值，vue會報錯：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"
以上這篇vue獲取DOM元素并設(shè)置屬性的兩種實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?background-image?不顯示問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue2+element-ui新增編輯表格+刪除行功能,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要介紹了Vue與Nuxt的區(qū)別及使用說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
關(guān)于vue-cli3+webpack熱更新失效及解決
這篇文章主要介紹了關(guān)于vue-cli3+webpack熱更新失效及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了幾分鐘弄懂Vuex的五大屬性和使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue項目接入Paypal實現(xiàn)示例詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
通過實例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過實例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
對于插槽的概念和使用,這是vue的一個難點,這需要我們靜下心來,慢慢研究,下面這篇文章主要給大家介紹了關(guān)于vue默認(rèn)插槽的相關(guān)資料,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了vue父組件異步獲取數(shù)據(jù)傳給子組件,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue3在setup中使用mapState方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04