您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
nextTick(渲染回调、异步渲染)
发布时间：2020-02-23 16:29:30编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var App = {
data:function() {
return {
isShow:false,
}
},
template:`<div class='app'><input type="text" v-show="isShow" ref="username"></div>`,
mounted:function() {
//现在有一个需求，当input显示后，就让其自动聚焦，但现在的情况是默认显示的情况下让其自动聚焦是ok的
//而当默认没有显示，那么等其显示后，我们的自动聚焦就无效了
//原来的实现：
/*
this.isShow=true;
this.$refs.username.focus();
*/
//这是因为当isShow时才变更input为显示，而此时仅接着操作focus时input还没有变成show，让一个不存在的元素聚焦肯定行不通
//那么正确的实现：
this.isShow=true;
this.$nextTick(function(){
this.$refs.username.focus();
});
}
}
new Vue({
el: '#app',
template: `<App />`,
data() {
return {}
},
components:{App}
});
</script>
</body>
</html>
关键字词：vue,nextTick,回调,渲染,异步