vue this.$refs

作者：月冷清发布日期:2025-04-22 浏览:142

<template>
  <div>
    <input ref="myInput" placeholder="Enter something">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 使用 this.$refs 获取 DOM 元素并操作
      this.$refs.myInput.focus();
    }
  }
}
</script>

解释说明：

ref="myInput"：在 <input> 元素上使用 ref 属性，给该元素一个引用名称 myInput。
this.$refs.myInput：通过 this.$refs 可以访问到具有 ref="myInput" 的 DOM 元素。
this.$refs.myInput.focus()：调用原生 DOM 方法 focus() 来聚焦输入框。

当你点击按钮时，focusInput 方法会被触发，进而使输入框获得焦点。

上一篇：vue界面转为静态html

下一篇：vue3computed