vue中让input框自动聚焦

最新推荐文章于 2025-06-04 10:17:48 发布

转载最新推荐文章于 2025-06-04 10:17:48 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/huanhuan55/p/10043816.html

文章标签：

#javascript #ViewUI

本文介绍在Vue中如何正确地在组件加载后使特定元素获得焦点。由于Vue的生命周期特性，在created钩子中直接操作DOM可能会导致无效，文章详细解释了如何使用$nextTick方法来解决这一问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  created(){
   this.changfouce();
  },
  methods: {
    //在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中，
    //因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。
    changfouce(){
    this.$nextTick((x)=>{   //正确写法
       this.$refs.inputs.focus();
    })
     this.$refs.inputs.focus(); //错误写法
     
    },