美文网首页
如何在v-for渲染完成后操作DOM

如何在v-for渲染完成后操作DOM

作者: 霖霖在呢 | 来源:发表于2017-07-21 16:19 被阅读0次

刚开始学习学习使用vue,最近在工作中使用v-for渲染数据后,想操作相应的DOM,遇到了一些问题,于是就想把这个做个笔记。若有错误需要补充的地方,欢迎指正。

问题:需要把从后台获取数据渲染到页面中,如通过v-for遍历相关数据到dom中显示,并且需要在渲染结束后,对相关的dom进行样式修改,例子:需要对图片的宽高比和位置进行修改

思路:从接口获取页面数据,保存在 数组detailList中,然后遍历展示

解决代码:

遇到问题:需求需要求展示图片按特定比例压缩,并截取展示

解决思路:获取dom,然后算出宽高,并用margin-left移动图片位置;但是,在获取dom的时候为难了,无论在created的initData之后调用,还是mounted中操作,都无法取得相应的dom,想下来,应该就是dom并没有渲染完成,在钩子函数中直接操作dom显然没效果,结果用了很笨的方法,把所有的代码放到 setTimeout(),延迟就可以,但是这个延迟时间是不可控的,在知乎上有人问了类似的问题,找到解决方法:

思路:用watch 监听dataList 的变化,然后在修改数据之后理解调用nextTick,等待DOM更新,这样就达到第一次打开页面时,图片的尺寸和位置就是处理过的

补充:

重新看了vue的生命周期和钩子函数后,对这个问题理解更深了点。可以把上面这段操作放到updated钩子函数中,其实也是监听了detailList的变化

相关文章

  • 如何在v-for渲染完成后操作DOM

    刚开始学习学习使用vue,最近在工作中使用v-for渲染数据后,想操作相应的DOM,遇到了一些问题,于是就想把这个...

  • dom更新后获取dom节点

    v-for渲染数据时 想要获取数据渲染后的dom,需要这样

  • 前端学习笔记05:vue初认识(二)

    ……续 循环渲染: v-for 其他指令 v-model如: 在注册时,是否会注意到当输入完成后,页面会自动检测用...

  • Vue 复习

    1.vue 简介简化DOM操作2.vue 指令1).v-for="" 循环操作 2).v-model="" ...

  • Vue的指令

    1.v-for v-for : 指令根据一组数组的选项列表进行渲染。(循环操作)例: v-for=“” 2...

  • vue第二节

    v-for 这是一个指令,只要有v-的就是指令(directive 操作dom ) 在vue中可以通过v-for来...

  • vue第三节

    v-for 这是一个指令,只要有v-的就是指令(directive 操作dom ) 在vue中可以通过v-for来...

  • vue 复习

    1.vue简介简化Dom操作2.vue指令(1)v-for="" 循环操作 (2)v-model="" 双向数...

  • vue的视图渲染优化

    在v-for渲染列表的时候,在节点上绑定对应的:key值,会让vue的视图在下次更新的时候跳过已经渲染的dom节点。

  • 五、Vue的条件渲染(v-if、v-show、v-for指令)

    五、Vue的条件渲染(v-if、v-show、v-for指令)v-if(控制DOM的存在与否)、v-show(控制...

网友评论

      本文标题:如何在v-for渲染完成后操作DOM

      本文链接:https://www.haomeiwen.com/subject/cveekxtx.html