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 操作属性获取
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue中如何使用echarts和echarts-gl实现3D饼图环形饼图
现在vue是很多公司前端的主流框架,我目前所在公司接触的项目也都是使用vue来实现的,很少有完全使用原生的JavaScript来写项目的了,下面这篇文章主要给大家介绍了关于vue中如何使用echarts和echarts-gl实现3D饼图环形饼图的相关资料,需要的朋友可以参考下2023-03-03
本文主要介绍了Element的Message弹窗重复弹出，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了el-table如何添加loading效果问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
Vue Router是Vue提供的路由管理器,将组件与路由一一对应起来,这种对应关系就路由,这篇文章主要介绍了Vue中vue-router路由使用,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了React和Vue中监听变量变化的方法,本文通过一个场景，父组件传递子组件一个A参数，子组件需要监听A参数的变化转换为state，具体内容详情大家跟随小编一起通过本文学习吧2018-11-11
这篇文章主要为大家介绍了antv完成区间柱形图一列多柱配置实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值,而watch则是一个更为通用的监听器,它可以在数据变化时执行异步操作或开销较大的操作2025-01-01
这两天在学习vue，主要是为了实现前后端的分离，因此数据的传输是必不可少的一个环节，这篇文章主要介绍了JSON数组和JSON对象在vue中的获取方法,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue刷新后瞬间闪烁,无法解析的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
本文主要介绍了vue v-on传递参数和事件修饰符的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-01-01
最新评论