vue中的v-for和ref
方式:使用vue中的ref获取DOM元素在html标签内使用ref和id<div ref="verify" id="verify">这是要被修改的DOM元素,把字体改成18px</div>在vue中获取DOM元素export default {mounted(){//打印id=verify的元素console.log(this.$refs.verify)//将id=veri
·
一、使用vue中的ref获取DOM元素
- 在html标签内使用ref和id
<div ref="verify" id="verify">
这是要被修改的DOM元素,把字体改成18px
</div>
- 在vue中获取DOM元素
export default {
name:'',
mounted(){
//打印id=verify的元素
console.log(this.$refs.verify)
//将id=verify的字体改为18px
this.$refs.verify.style.fontSize = "18px";
}
}
二、v-for+ref动态获取DOM元素
- html元素中写ref
<li v-for="item in number" :key="index" ref="lis">1</li>
- vue中利用this.$nextTick(() => {})获取动态生成的DOM元素
export default {
name:'',
mounted(){
this.$nextTick(() => {
console.log(this.$refs.lis);
});
}
}
此时如果出现返回结果为undefined字样,则原因为:
在mounted阶段,DOM结构准备就绪,DOM结构已经出来了,但是如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for(即根据获得的后台数据来动态操作DOM,即响应式),那么这些DOM是在mounted阶段是找不到的。所以如果在mounted钩子中使用$refs,如果ref是定位在有v-if、v-for、v-show中的DOM节点,返回来的只能是undefined,因为在mounted阶段他们根本不存在。
解决方式有以下三种:
- 将mounted改成updated,updated阶段完成了数据更新到DOM的阶段(对加载回来的数据进行处理),此时,ref、数据等等全部都挂载到DOM结构上去,在update阶段使用this.$refs.xxx,就100%能找到该DOM节点。但是updated与mounted不同的是,在每一次的DOM结构更新,vue都会调用一次updated(){}钩子函数,而mounted仅仅只执行一次而已;
- 使用 this.$nextTick(() => {}) 等页面渲染好再调用;
- 搭配第二种方式,加个定时器延时加载this.$refs;(本文的解决方法)
//采用第三种解决方式的代码
export default {
name:'',
mounted(){
setTimeout(() => {
this.$nextTick(() => {
console.log(this.$refs.lis);
});
},1000);
}
}
注意
- 在获取相应元素之前,必须在mounted生命周期进行挂载,否则获取到的值为空;
- 如果是给子组件加id并修改自定义属性,则直接会加载该子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值;
- 如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错:
Avoid mutating a prop directly since the value will be overwritten,whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “title”
三、参考
- 注意点参考:
https://blog.csdn.net/m0_37686205/article/details/96130534- 解决方式:
https://blog.csdn.net/changzhen11/article/details/84067816- 返回undefined原因详解:
https://www.cnblogs.com/pengshengguang/p/7929367.html
更多推荐
已为社区贡献5条内容
所有评论(0)