vue.js操作dom的方法:1、原生js操作dom,程式碼為【const dom = getElementById('box')】;2、使用vue官方方法ref,程式碼為【4556ca421389ca390d4b00d1d8d4685f】。
本教學操作環境:windows7系統、Vue2.9.6版,DELL G3電腦,此方法適用於所有品牌電腦。
【相關文章推薦:vue.js】
#vue.js操作dom的方法:
1、原生js操作dom
const dom = getElementById(‘box')
2、vue官方方法:ref
vue中的ref是把目前dom元素「抽離出來」 ,只要透過this.$refs就可以取得到
< div class=“set” ref=“up”>
.set
是我們要操作的dom對象,它的ref是up
@click=“Alert”
給父元素一個點擊事件,
接下來我們來寫這個方法
methods:{ this.$refs.addAlert.style.display = “block”; }
CSS還要嗎?
那我把程式碼全黏過來你們自己看吧
CSS比正文和腳本加起來都多,如果你能看懂CSS,沒理由學不會ref
還有第三種方法,jQuery 操作dom,看完以後直呼不敢用
3、jQuery操作dom
只要拿jQuery的選擇器,選中相應的dom進行操作就可以了,但是大家都知道jQuery獲取元素是查找頁面所有,相當於“循環”所有元素直至找到需要的dom,但是vue是單頁面的,jQuery獲取dom並不只是取得vue目前頁面,而是從根路由開始尋找所有,當其他頁面出現相同的元素,也會被取得到,而且jQuery操作的dom,如果是根據動態取得資料渲染的,那麼寫在mounted裡的動作方法將會失效,必須放到updated裡,這會導致有些操作被執行多遍,所以還是不建議在vue中使用jQuery。
相關免費學習推薦:javascript學習教學
以上是vue.js如何操作dom的詳細內容。更多資訊請關注PHP中文網其他相關文章!