Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们非要拿到DOM操作DOM怎么办,那也是有方法的,而且不止一种方法
方式一:(事件源)
<body> <div id="aa"> <input type="button" value="点击" v-on:click='fun'/> </div> <script> new Vue({ el:'#aa', methods:{ fun:function(event){ console.log(event.target); } } }) </script> </body>
输出结果
当然也可以在方法中传参进去:
<body> <div id="aa"> <input type="button" value="点击" v-on:click='fun($event.target)'/> </div> <script> new Vue({ el:'#aa', methods:{ fun(x){ console.log(x); } } }) </script> </body>
方式二:(使用ref)
<body> <div id="aa"> <input ref='name' type="button" value="点击" v-on:click='fun'/> </div> <script> new Vue({ el:'#aa', methods:{ fun(){ console.log(this.$refs.name); } } }) </script> </body>
输出结果:
方式三:(自定义全局指令)
<body> <div id="aa"> <input type="button" value="点击" v-get/> </div> <script> Vue.directive("get",{ bind:function(el){ console.log(el); } }) new Vue({ el:'#aa' }) </script> </body>
这里不用点击,就可以获取元素,好像在谷歌显示不友好,
在火狐显示会好点