$nextTick
的作用是,在下一次DOM更新结束时执行指定的回调。
$nextTick
的使用场景是,当数据改变时,要基于更新后的DOM执行某些操作,可以在$nextTick
指定的回调中执行。
关于nextTick,更多可以访问Vue官网。
看个具体的例子。
- main.js
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
el:"#app",
render: h => h(App)
})
- App.vue
<template>
<div class="app">
<span class="title" v-show="!obj.isEdit">{{obj.title}}</span>
<input class="title" v-show="obj.isEdit" type="text" :value="obj.title" ref="inputEle" @blur="handleBlur($event)">
<button class="btn" @click="handleEdit" v-show="!obj.isEdit">编辑</button>
</div>
</template>
<script>
export default {
data(){
return {
obj:{
title:"吃饭",
isEdit:false
}
}
},
methods:{
handleEdit(){
this.obj.isEdit = true;
// this.$refs.inputEle.focus();
this.$nextTick(function(){
this.$refs.inputEle.focus();
})
},
handleBlur(e){
this.obj.isEdit = false;
if(!e.target.value.trim()) return alert("输入不能为空!");
this.obj.title = e.target.value;
}
}
}
</script>
<style>
.app{
display: inline-block;
margin: 20px;
}
.title{
display: inline-block;
width:180px;
box-sizing: border-box;
}
.btn{
padding: 3px 15px;
color: #fff;
background: rgb(228, 187, 83);
border: 1px solid goldenrod;
border-radius: 5px;
float: right;
margin-left: 5px;
}
.btn:hover{
cursor: pointer;
background: goldenrod;
}
.btn:active{
background: darkgoldenrod;
}
</style>
一点击编辑按钮,文本变成输入框,且输入框自动获得焦点。