♥ vue中$nextTick()

最新推荐文章于 2024-07-23 15:45:06 发布

林太白

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量292

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

林太白

本文链接：https://blog.csdn.net/weixin_43615570/article/details/132208296

版权

Vue 专栏收录该内容

39 篇文章 3 订阅

订阅专栏

♥ vue中$nextTick()

① 语法


this.$nextTick(回调函数)

② 作用

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

使用时机----(比方Echarts地图的渲染)
当改变数据后，要基于更新后的新DOM进行某些操作时，要在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>