Vue.js是一款流行的前端框架,其中有一個非常實用的功能是使用DOM append操作。在Vue中,可以使用ref屬性獲取DOM節點,然后使用$refs對象訪問它們,接下來,我們將一步步介紹如何使用Vue DOM append。
假設我們有一個div作為我們的目標容器:
<div id="container"></div>
我們想要在這個容器中添加一個新的p標簽,可以使用Vue的$this.$refs.container.appendChild()方法,如下所示:
mounted() { let paragraph = document.createElement('p'); paragraph.innerHTML = 'Hello, World!'; this.$refs.container.appendChild(paragraph); }
在這個例子中,在組件的mounted()生命周期鉤子函數中,我們動態地創建了一個新的p標簽,并添加到目標容器中。
DOM append操作是非常有用的,它可以讓我們在Vue頁面中動態地添加或刪除DOM元素,從而讓我們的頁面更加靈活和富有交互性。