vue.js中 this.$nextTick()的使用
2024-10-06 22:35:57
官方文档是这样介绍的:
this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它,然后等待DOM更新。
this.$nextTick 跟全局方法 vue.nextTick 一样,不同的是,回调的 this 自动绑定到调用它的实例上。
总的来说,假设我们更改了某个 dom 元素内部的文本,而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的,就像我们把将要打印输出的代码放在 setTimeout(fn, 0) 中
具体代码:
<template>
<button ref="tar" type="button" name="button" @click="testClick">{{content}}</button>
</template> <script>
export default {
data () {
return {
content: '初始值'
}
}
methods: {
testClick(){
this.content = '改变了的值'
// 这时候直接打印的话,由于dom元素还没更新,因此打印出来的还是未改变之前的值
console.log(that.$refs.tar.innerText) // 初始值
}
}
}
</script>
this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来
methods:{
testClick() {
this.content = '改变了的值'
this.$nextTick(() => {
// dom元素更新后执行,因此这里能正确打印更改之后的值
console.log(that.$refs.tar.innerText) // 改变了的值
})
}
}
最新文章
- Android AndroidRuntime类
- angularjs自带过滤器
- 每天一个linux命令(8):cp 命令
- ios – 使用UINib加载xib文件实现UITableViewCell
- Asp.Net之后台加载JS和CSS
- linux下创建和删除软、硬链接
- Educational Codeforces Round 1 A
- OpenJudge计算概论-发票统计
- AjaxFileUpload 在C#中应用
- 由底层和逻辑说开去--c++之引用的深入剖析
- 使用libCurl实现断点下载
- N-Queens II 解答
- eclipse IDE 扩展pydev
- UOJ #207. 共价大爷游长沙 [lct 异或]
- A页面跳转到B页面后打开指定tabs标签
- Python:Selenium 1:浏览器驱动
- python中文分词库——pyltp
- Android 录音和播放
- [No0000116]SQLServer启用sa账户
- JS中什么是发布--订阅模式?
热门文章
- 用链式字典树解决POJ2945
- kettle处理未发现hadoop插件问题
- mysql+canal+kafka+elasticsearch构建数据查询平台
- Javascript——数据类型 和 注释
- js 动态添加Table tr,选中与不选中checkbox行数NO的变化
- python numpy 的用法——diag函数
- java web浏览器访问工程前面添加一级目录学习笔记
- Centos7:Solr4.10安装,配置与使用(tomcat环境)
- JQuery 判断复选框是否选中
- 【转】ESXi主机出现“主机上的系统日志存储在非持久存储器中”解决办法