vue refs

作者：戮尽逆者发布日期:2026-02-27 浏览:57

<template>
  <div>
    <input ref="myInput" type="text" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      // 使用 this.$refs 来访问 ref 名为 "myInput" 的 DOM 元素
      this.$refs.myInput.focus();
    }
  }
};
</script>

解释说明：

ref="myInput"：在 <input> 元素上添加 ref 属性，命名为 myInput。这样我们就可以通过 this.$refs.myInput 来直接访问这个 DOM 元素。
this.$refs.myInput.focus()：在点击按钮时，调用 focusInput 方法，该方法会通过 this.$refs.myInput 获取到对应的 DOM 元素，并调用其 focus() 方法使输入框获得焦点。

如果你需要进一步了解 vue refs 的其他用法，可以查阅 Vue 官方文档或提供更多具体需求。

上一篇：vue aes加密

下一篇：vue 获取当前日期