♥ vue中$nextTick()

♥ 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/[email protected]/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>

你可能感兴趣的:(Vue,vue.js,javascript,前端)