在 Vue 中獲取元素并添加類名可以通過以下兩種方式實現:
// 第一種方式:利用 $refs 屬性獲取元素 <template> <div ref="myDiv"> 我是一個 div 元素 </div> </template> <script> export default { mounted() { this.$refs.myDiv.classList.add('my-class'); }, }; </script>
在上面的代碼中,我們在模板中使用 ref 屬性給元素命名,然后在 mounted 鉤子函數中使用 this.$refs.myDiv 獲取到該元素,進而使用 classList.add() 方法給它添加了一個名為 my-class 的類名。
// 第二種方式:利用 $el 屬性獲取元素 <template> <div> 我是一個 div 元素 </div> </template> <script> export default { mounted() { this.$el.querySelector('div').classList.add('my-class'); }, }; </script>
在上面的代碼中,我們在 mounted 鉤子函數中使用 this.$el 獲取到父元素 div,然后利用 querySelector() 方法獲取到第一個子元素 div,并使用 classList.add() 方法給它添加了一個名為 my-class 的類名。