在Vue中,獲取HTMLElement元素的方式有多種。下面是其中的兩種方法。
//方法一:通過(guò)ref獲取 <template> <div ref="myDiv">This is my div</div> </template> <script> export default { mounted() { console.log(this.$refs.myDiv); //返回一個(gè)HTMLElement對(duì)象 } } </script>
通過(guò)在模板中添加ref屬性,可以將元素綁定到組件實(shí)例的屬性中,然后在mounted鉤子中使用this.$refs獲取到HTMLElement對(duì)象。
//方法二:通過(guò)$el獲取 <template> <div>This is my div</div> </template> <script> export default { mounted() { console.log(this.$el); //返回一個(gè)HTMLElement對(duì)象 } } </script>
每個(gè)Vue組件實(shí)例都有一個(gè)$el屬性,它是當(dāng)前組件實(shí)例渲染出的實(shí)際DOM元素??梢灾苯邮褂胻his.$el獲取到HTMLElement對(duì)象。需要注意的是,這種方法只能在組件已經(jīng)渲染完成之后使用。