兩種vue取得DOM元素並設定屬性的方法

本文主要為大家帶來一篇vue取得DOM元素並設定屬性的兩種實作方法。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

這裡我想到了2個方法：

方法一：

#直接給對應的元素加id,然後再document.getElementById("id") ;獲取，然後設定對應屬性或樣式

方法二：

使用ref,給對應的元素加ref=“name” 然後再this.$refs.name取得到該元素

注意：在取得對應元素之前，必須在mount鉤子進行掛載，否則取得到的值為空，

如果是給子元件加id並修改自訂屬性，則直接會載入改子元件對應的外層p上，並不會改變該子元件原本的自訂屬性的值

如果給子元件加ref,然後取得到該DOM元素之後會改變對應的自定義屬性的值，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"

相關推薦：

#利用html的name屬性取得dom元素

###################################### #取得DOM物件的幾個擴充及簡寫_javascript技巧############用JavaScript取得DOM元素位置和尺寸大小的方法_基礎知識#######

以上是兩種vue取得DOM元素並設定屬性的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！