Vue异步更新和$nextTick函数

港控/mmm° 2024-02-05 20:01 7阅读 0赞

Vue是异步dom对象更新的

需求：编辑标题，编辑框自动聚焦

1：点击编辑，显示编辑框

![ea98d4616c3e4941b5d1df92cdccf7b1.png][]

2：让编辑框，立刻获取焦点

![52bbf8e534324d4eaa36dc739e3fe87c.png][]

可以使用$nextTick函数加载完dom之后触发想要操作dom的方法

<template>
        <div>
            <div v-if="flag">
              <input type="text" v-model="username" ref="inp">
              <button>确认</button>
            </div>
            <div v-else>
              <span>{
       {title}}</span>
              <button @click="edit">编辑</button>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
              flag:false,
              username:'',
              title:'大标题'
            };
        },
    
        mounted() {
    
        },
    
        methods: {
          edit(){
            this.flag = true
            //获取到输入框焦点
            this.$nextTick(()=>{
              this.$refs.inp.focus()
            })
            // setTimeout(()=>{
            //   this.$refs.inp.focus()
            // //  等待个一秒中
            // },1000)
          }
        },
    };
    </script>
    
    <style  scoped>
    
    </style>

[ea98d4616c3e4941b5d1df92cdccf7b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/078a90c3bba94ac482bb53d883156a87.png
[52bbf8e534324d4eaa36dc739e3fe87c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/02cbc435142b4ddab6adfd1b31df5f29.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue异步更新和$nextTick函数

Vue是异步dom对象更新的需求：编辑标题，编辑框自动聚焦 1：点击编辑，显示编辑框 ![ea98d4616c3e4941b5d1df92cdccf7b1.png][]

港控/mmm°/ 2024年02月05日 20:01/ 0 赞/ 8 阅读

相关 Vue - 深入解析 DOM 更新与 nextTick 函数

`nextTick`函数是一个有趣且重要的工具。在本文中，我们将深入探讨一个简单的Vue.js组件示例，以了解DOM更新的机制以及如何使用`nextTick`来确保在合适的时机

旧城等待，/ 2024年02月05日 19:25/ 0 赞/ 10 阅读

相关【vue2第十二章】ref和$refs获取dom元素和 vue异步更新与$nextTick使用

ref和$refs获取dom元素为什么会有 ref 和 $refs？因为在vue页面中使用dom查找元素，不管你是不是在子组件里面查找，查找的都是整个页面的元素，如

电玩女神/ 2023年10月15日 16:23/ 0 赞/ 128 阅读

相关 Vue异步更新机制和nextTick原理

作者 | WahFung 来源 | https ://www.cnblogs.com/chanwahfung/p/13296293.html 前言最初更

小灰灰/ 2023年03月01日 10:17/ 0 赞/ 15 阅读

相关 Vue 的 DOM 更新策略和 nextTick() 的使用

一、Vue 的 DOM 更新策略 Vue 的响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。那么 DOM 更新的策略是什么样的呢？

深碍√TFBOYSˉ_/ 2023年01月16日 11:09/ 0 赞/ 130 阅读

相关 Vue异步更新队列

以下为官网详解 [Vue异步更新队列][Vue] Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的

约定不等于承诺〃/ 2022年10月24日 05:49/ 0 赞/ 153 阅读

相关 Vue异步更新队列及nextTick

vue通常鼓励开发人员沿着“数据驱动”的方式思考，避免直接接触 DOM。Vue的dom更新是异步的，当数据发生变化，vue并不是里面去更新dom，而是开启一个队列。跟JavaS

Bertha 。/ 2022年10月01日 10:49/ 0 赞/ 137 阅读

相关 Vue学习之源码分析--Vue.js异步更新DOM策略及nextTick（八）

操作DOM 在使用vue.js的时候，有时候因为一些特定的业务场景，不得不去操作DOM，比如这样： <template> <div>

心已赠人/ 2022年06月07日 11:24/ 0 赞/ 204 阅读

相关 Vue.nextTick() 和Vue.nextTick() 使用案例

在下次DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。虽然 vue.js 通常鼓励开发人员用数据驱动的方式思考，避免直接接

àì夳堔傛蜴生んèń/ 2022年01月19日 21:13/ 0 赞/ 612 阅读

相关 vue watch+$nextTick界面更新渲染数据

Vue更新时机: 1.Vue在更新DOM时是异步执行的。 2.只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。

我就是我/ 2021年07月24日 19:03/ 0 赞/ 841 阅读