3 14 Vue中如何操作dom?

2021-10-03 21:37:35 字數 798 閱讀 6823

前面的話

前端日問,與小柒一起打卡學習,每天進步一點點!

原生操作dom

a = document.

getelementbyid

('elea');

// 獲取a

elementlist = document.

queryselectorall

(selectors)

;//獲取多個dom元素 如ul中的li

element = document.

queryselector

(selectors)

//獲取dom元素中的第乙個元素

還有很多這樣的dom操作方法。

vue中一般不操作dom,如果想要獲取dom元素,該如何操作?

vue中操作dom

注意: vue 2.x將v-elv-ref合併為ref。

補充:

ref屬性可以使用在普通標籤中,也可以使用在元件中,在父元件的模板中,子元件的標籤上使用ref指定乙個名稱(name),並在父元件中通過this.$refs.***(name)來訪問這個子元件中的資料。

>

"myp"

>

<

/p>

"child"

>

<

/child-components>

<

/div>

vue學習dom操作

vue中要操作dom 首先需要在template元件中設定 ref dom的名稱 再在script中使用 this.refs.dom的名稱 就可以用dom的操作方式進行操作了。這種方式也可以直接獲取元件物件,如果ref是放在元件上的時候。元件的dom物件獲取方式是 this.refs.元件名稱.el...

vue中獲取並操作dom元素

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

Vue中直接操作DOM元素操作

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