vue.js如何操作dom

vue.js操作dom的方法：1、原生js操作dom，程式碼為【const dom = getElementById('box')】；2、使用vue官方方法ref，程式碼為【< div class =“set” ref=“up”>】。

本教學操作環境：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中文網其他相關文章！