v-for是vue.js中的指令,用于遍历数组或对象中的数据,动态添加dom。使用v-for指令时,需要提供一个数组或对象,它会根据提供的数据来渲染相应的dom结构。v-for指令的语法是:v-for="(item,index) in items",其中items是要遍历的数组或对象,item是当前遍历到的元素,index是当前遍历到的元素的索引。使用v-for指令可以快速的渲染出dom结构,而不用写大量的dom结构代码。
一、问题引入
原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用 document.getElementById('id') 改为 ref 获取元素的形式。
单独创建一个 .vue 组件,通过绑定传值,触发页面变化从而触发 beforeUpdate 。
然后发现 beforeUpdate() 中根本获取不到此元素,用原生js获取也不行。
三、解决
1、 beforeUpdate() 生命周期函数中,在获取元素语句外套用 this.$nextTick(function(){...}) 。( mounted 无效,原因待查明)
官方解释:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。即DOM真正加载完成。
1、 this.$refs.xxx拿到虚拟dom,可以进行真实dom的一切 *** 作
1)在标签中添加ref="xxx"
2)在方法中用this.$refs.xxx拿到这个元素,跟document.getElementById('*')一样。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)