通过ref来获取DOM节点

Posted lanyb009

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过ref来获取DOM节点相关的知识,希望对你有一定的参考价值。

 1 <template>
 2   <div>
 3     <div ref="hello">
 4       hello world
 5     </div>
 6     <button @click="handleClick">我是按钮</button>
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: Home,
13   data () {
14     return {
15       arr: ‘‘
16     }
17   },
18   methods: {
19     handleClick () {
20       this.arr = this.$refs.hello.innerhtml //获取DOM元素节点的值
21       alert(this.arr)
22     }
23   }
24 }
25 </script>

注意:在HTML中时ref,而在methods中是refs,因为在HTML中ref可能有很多,而在methods是通过总的ref来寻找

以上是关于通过ref来获取DOM节点的主要内容,如果未能解决你的问题,请参考以下文章

vue-获取dom节点

vue通过ref获取dom节点

Vue中ref和$refs的介绍及使用

Vue 中怎样获取具名 slot 的 DOM 节点

vue中$refs的用法及作用详解

React 事件对象键盘事件表单事件ref获取dom节点react实现类似Vue双向数据绑定