vue类名如何获取动态生成的元素
更新时间：2022年04月20日 10:38:25 作者：北岭有燕
这篇文章主要介绍了vue类名如何获取动态生成的元素，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
类名获取动态生成的元素
首先注意的是，该元素必须在id为app这个元素里面
new Vue({
el: "#app",
})其次是由于动态生成的，想获取到该元素，需要在created里使用nextTick。
并且可以 $(’.circle’ + i)拼接想要的元素类名。
this.$nextTick(() => {
for (var i = 1; i < this.carlist.length + 1; i++) {
$('.circle' + i).css("left", this.random(0, 1650))
}
})在写样式的时候遇到了一点问题：
盒子的margin塌陷（发生在两个盒子嵌套的时候，父盒子和子盒子同时设置margin的时候会出现实际的magin取的是两个margin的最大值）
解决办法：
给父元素增加
overflow:hidden
如何获取并操作dom元素
方法一：
直接给的元素加id,使用document.getElementById(“id”)获取，然后操作 dom 元素
mounted(){
this.element = document.querySelector('#element_1');
this.element.style.color = "red";
}为什么是在mouted钩子使用？
因为只有在执行mounted的时候，vue才已经渲染了dom节点，这个时候是可以获取dom节点的
方法二：
使用ref,给元素添加ref=“name” ，使用 this.$refs.name 获取到该元素，再对元素进行操作
// 定义ref <div ref="div_1">获取元素</div> // 获取并操作 this.$refs.div_1.style.backgroundColor="red"
建议：vue中尽量不去操作 dom 元素，选用 ref 操作属性获取
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
浅谈vue3中ref、toRef、toRefs 和 reactive的区别
本文主要介绍了浅谈vue3中ref、toRef、toRefs 和 reactive的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
如果你在社交媒体上停留的时间过长，那么，你所在的网站很可能正在使用无限滚动组件。这篇文章教你利用Vue3实现无限滚动组件，感兴趣的可以参考一下2022-09-09
这篇文章主要介绍了jenkins自动化部署vue，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
vue-element换肤所有主题色和基础色均可实现自主配置
这篇文章主要介绍了vue-element换肤所有主题色和基础色均可实现自主配置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了使用Vue-axios进行数据交互详情，文章围绕Vue-axios进行数据交互的相关资料展开详细内容，需要的小伙伴可以参考一下，希望对你的学习或工作有所帮助2022-03-03
这篇文章主要给大家介绍了关于vue中axios请求封装的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧要的朋友可以参考下2019-03-03
我们正常在开发项目中,表格的风格是一致的,但是表格或多或少会有些不同,有些是需要分页,有些是按钮功能不同,有些又需要加Tag,或者对时间进行格式化等,这篇文章主要介绍了elementPlus表格二次封装过程,需要的朋友可以参考下2024-07-07
本文主要介绍了vue页面不能根据路径进行跳转的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
这篇文章主要介绍了vue使用mui遇到的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了浅谈vux之x-input使用以及源码解读，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
最新评论