vue.js 如何在页面渲染完后去操作dom,而且只执行一次?

我想在页面渲染完执行我的代码,去操作dom。因为我把操作dom的写在加载数据的方法里面,发现是选不到dom的,应该是这个时候js还没执行完,页面还没渲染好。

vue的created是实例创建完执行一次,但是这个时候去操作dom是选不到的。
还有个update,这个倒是可以选到dom,但是这个每次都被执行啊,我只想在执行一次。

对于这种需求,有没有什么好的解决方法?

回答:

在接口请求成功的回调里使用

this.$nextTick(() =>{
  // 在这里面去获取DOM
})。

在mounted生命周期,组件挂载成功,但还未渲染,自然获取不到相关的DOM节点。看你资料好像不是前端,举个更简单的例子,你在html中,把 console.log(document.querySelector('body'))写在body标签前面,代码执行时机先于页面渲染,结果就是undefined。
不推荐用updated, beforeUpdate生命周期,这2个生命周期只会在数据发生变化时才触发。如果你请求接口的数据是放在created生命周期(我推荐放在created里面去发起请求),初次进入页面是不会触发updated, beforeUpdate里面的代码。
如果你非要要updated,并且希望第一次进入页面即可获取到DOM节点,那么请在mounted生命周期请求接口数据,而不是created了

回答:

在你请求数据接口之后,给数据赋值完成,在后面写

this.$nextTick(function(){

})

同时注意下this指向

回答:

DOM选在加载完毕是在mounted这个生命周期,在这里面是可以执行一些事件的;
在Vue中要想就执行一次点击事件,可以使用事件修饰符.once,非常好用。例如:<p v-on:click.once="doThis">只执行一次</p>,当然绑定事件可以简写成@符号的。 激凸可参考官方文档: https://vuefe.cn/v2/guide/eve…

回答:

mounted: function () {
  this.$nextTick(function () {

  })
}

回答:

看下vue的生命周期,直接用mounted就好了

回答:

结合大家的回答,我又去看了下文档,this.$nextTick是可以的,但是一定要放在数据加载完后。要能选到dom,并且独立于方法之外,还是用updated,beforeUpdate。文档上也是这么说的。
如果用mounted,我的dom选不到,从文档上的意思是实例创建完调用它,但是选不到dom,不知道是不是我代码的问题。

回答:

使用directive自定义指令

回答:

我记得vue不支持直接操作dom。你可以试着给dom节点加个ref,等到mounted之后就行js事件

回答:

this.$nextTick(function(){
    // ...
})

dom再配合 v-once 只渲染一次

回答:

实在不行的话,可以在mounted() {} 里面初始化,然后 调用this.xxxx,也可以使用jquery操作dom,我的vue项目用vue解决不了,就用jquery来解决。

回答:

你要在获取数据之后用this.$nextTick(()=>{ //todo }) 这样就能拿到dom元素了。
图片描述

回答:

this.$nextTick(()=>{})放到请求的结束的回调里面

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注