[Vue]$nextTick()

最新推荐文章于 2023-11-07 11:58:08 发布

小炜1128

最新推荐文章于 2023-11-07 11:58:08 发布

阅读量1.2k

点赞数 1

分类专栏： Vue 学习笔记文章标签： vue.js 前端 javascript 前端框架 html

本文链接：https://blog.csdn.net/m0_53022813/article/details/127391196

版权

Vue 学习笔记专栏收录该内容

90 篇文章 29 订阅

订阅专栏

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

前言
1. $nextTick()
1.1 语法
1.2 作用
1.3 使用时机

2. $nextTick() 使用实例

1. $nextTick()

1.1 语法

this.$nextTick(回调函数)

1.2 作用

在下一次 DOM 更新结束后执行其指定的回调。

1.3 使用时机

当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

2. $nextTick() 使用实例

需求：需要实现点击按钮，使用文本框对页面中的标题数据进行修改，且文本框能够自动获取焦点，文本框失去焦点保存修改后的标题，且文本框隐藏。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset= "UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    <h1>{{title}}</h1>
    <input 
      type="text" 
      v-model="title"
      v-show="isEdit"
      ref="inputTitle"
      @blur="handlerBlur"
    >
    <button
      v-show="!isEdit"
      @click="handlerEdit"
    >点击修改标题</button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#root',
    data: {
      title: 'hello world',
      // 是否处于编辑状态
      isEdit: false
    },
    methods: {
      // 对标题进行编辑
      handlerEdit() {
        // 修改状态为编辑状态
        this.isEdit = !this.isEdit
        // 直接让输入框获取焦点
        // 此时函数中的代码还未完全执行完成，vue不会进行模板的重新解析
        // 所以更新后的还未放入页面，此时获取焦点无效
        // this.$refs.inputTitle.focus()

        // 使用nextTick()在页面解析完成后让文本框获取焦点
        // 基于更新后的新输入框进行操作，使其获取焦点
        this.$nextTick(()=>{
          this.$refs.inputTitle.focus()
        })
      },
      // 处理文本框失去焦点
      handlerBlur() {
        // 修改状态为不处于编辑状态
        this.isEdit = !this.isEdit
      }
    },
  })
</script>
</html>