Vue 3 如何不使用原生DOM方法获取输入框的DOM属性

云原生阿岚

2026-8-22

Vue中无需原生DOM方法获取输入框属性的方案

作为Vue新手，你可以用Vue官方提供的ref特性来安全获取DOM元素的属性，完全不需要document.querySelector、getElementById这类原生方法，具体分Vue3和Vue2两种场景：

Vue3 实现方式

在模板中给输入框添加ref标识：

<input ref="myInput" id="myInputId" class="myInputClass" type="text"/>

在组件的setup函数中创建对应的响应式ref变量，并在组件挂载后访问元素属性：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    // 创建与模板ref同名的响应式变量
    const myInput = ref(null)

    // 组件挂载完成后再访问DOM元素，此时元素已渲染
    onMounted(() => {
      if (myInput.value) {
        const inputId = myInput.value.id
        const inputClass = myInput.value.className
        const inputType = myInput.value.type
        
        console.log('id:', inputId, 'class:', inputClass, 'type:', inputType)
      }
    })

    // 必须返回ref变量，才能在模板中关联
    return { myInput }
  }
}

Vue2 实现方式

同样先在模板中添加ref标识：

<input ref="myInput" id="myInputId" class="myInputClass" type="text"/>

在组件的mounted钩子中通过this.$refs获取元素并读取属性：

export default {
  mounted() {
    const inputElement = this.$refs.myInput
    const inputId = inputElement.id
    const inputClass = inputElement.className
    const inputType = inputElement.type
    
    console.log('id:', inputId, 'class:', inputClass, 'type:', inputType)
  }
}