太原建设厅官方网站,免费网页游戏大全,新乡外贸网站建设,网络营销的案例有哪些♥ vue中$nextTick()
① 语法 this.$nextTick(回调函数)② 作用
在下一次 DOM 更新结束后执行其指定的回调
使用时机----(比方Echarts地图的渲染) 当改变数据后#xff0c;要基于更新后的新DOM进行某些操作时#xff0c;要在nextTick所指定的回调函数中执行
③ 案例: 实现…♥ vue中$nextTick()
① 语法 this.$nextTick(回调函数)
② 作用
在下一次 DOM 更新结束后执行其指定的回调
使用时机----(比方Echarts地图的渲染) 当改变数据后要基于更新后的新DOM进行某些操作时要在nextTick所指定的回调函数中执行
③ 案例: 实现点击按钮使用文本框对页面中的标题数据进行修改且文本框能够自动获取焦点文本框失去焦点保存修改后的标题且文本框隐藏 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idrooth1{{title}}/h1input typetext v-modeltitle v-showisEdit refinputTitle blurhandlerBlurbutton v-show!isEdit clickhandlerEdit点击修改标题/button/div
/body
script srchttps://cdn.jsdelivr.net/npm/vue2.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
