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