当前位置:首页 > 经验笔记 > VUE > 正文内容

简单理解Vue中的nextTick

han32685年前 (2020-07-22)VUE2742
官方文档:Vue 在更新 DOM 时是异步执行的,为了在数据变化之后等待 Vue 完成更新 DOM,可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。
<div class="app">
  <div ref="msgDiv">{{msg}}</div>
  <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
  <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
  <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
  <button @click="changeMsg">
    Change the Message  </button>
</div>
new Vue({
  el: '.app',
  data: {
    msg: 'Hello Vue.',
    msg1: '',
    msg2: '',
    msg3: ''
  },
  methods: {
    changeMsg() {
      this.msg = "Hello world."
      this.msg1 = this.$refs.msgDiv.innerHTML      
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML      })
      this.msg3 = this.$refs.msgDiv.innerHTML    }
  }})


image.png

扫描二维码推送至手机访问。

版权声明:本文由瀚文博客发布,如需转载请注明出处。

本文链接:https://hanwenblog.com/post/15.html

分享给朋友:

相关文章

vue 用webpack 打包的时候添加版本号, VUE 项目更新部署时,浏览器页面缓存问题

因浏览器缓存原因导致vue 打包的文件 导致偶尔会出现不能即使更新最新代码。因此在打包的文件名中添加一个版本号以便浏览器能区分。module.exports = {  ...

基于vue的移动端图片裁剪压缩处理

效果展示:原作者介绍:传送门原作者github:传送门基于原作者封装的组件:传送门基于原作者+vant UI封装的组件:传送门...

vue element table expand 设置只可以展开一行、设置点击行即可打开扩展内容

在Vue中使用Element UI的el-table组件时,‌可以通过以下步骤设置只可以展开一行以及通过点击行即可打开扩展内容:‌设置只可以展开一行:‌通过监听expand-change事件来实现每次...

vue 去除前后空格trim的使用方法

一、使用trim修饰符<input v-model.trim = "massage" >二、使用filter过去属性 <...

vue 项目运行node-sass报错

vue 项目运行node-sass报错

报错信息Browserslist: caniuse-lite is outdated. Please run:   npx&nb...