vue學習dom操作

2021-08-24 23:36:54 字數 363 閱讀 4232

vue中要操作dom , 首先需要在template元件中設定 ref="dom的名稱";  再在script中使用 this.$refs.dom的名稱 就可以用dom的操作方式進行操作了。這種方式也可以直接獲取元件物件,如果ref是放在元件上的時候。元件的dom物件獲取方式是:this.$refs.元件名稱.$el就是對應的元件的dom物件。  如果不記得的時候,可以直接使用console.info列印出來,再去找到要用的資料

在script中有個方法 created 是元件建立後,資料已經完成初始化化,但是dom還沒生成,所有這個方法中是不能使用dom的

mounted是資料裝載到dom上後,各種資料已經就位,將資料渲染到dom上,dom已經生成, 所以這裡可以使用dom

Vue中直接操作DOM元素操作

oid class cla div input name age var odiv document.getelementsbytagname div 獲取div標籤的偽陣列 var oinput document.getelementsbyname age 獲取 name屬性偽陣列 系統自帶也可以...

Vue提供操作DOM的方法

ref nexttick 的 函式中初始化 因為 vue 是資料驅動的,vue 資料發生變化 this.data res.data 到頁面重新渲染是乙個非同步的過程,我們的初始化時機是要在 dom 重新渲染後,所以這裡用到了 this.nexttick,當然替換成 settimeout fn,20 ...

vue中獲取並操作dom元素

獲取dom元素可以使用 elementlist document.queryselectorall selectors 獲取多個dom元素 如ul中的lielement document.queryselector selectors 獲取dom元素中的第乙個元素在vue中使用 mounted 要在...