刚开始学习学习使用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的变化
网友评论