vue類名如何獲取動態(tài)生成的元素
更新時間：2022年04月20日 10:38:25 作者：北嶺有燕
這篇文章主要介紹了vue類名如何獲取動態(tài)生成的元素，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
類名獲取動態(tài)生成的元素
首先注意的是，該元素必須在id為app這個元素里面
?new Vue({
? ?el: "#app",
? })其次是由于動態(tài)生成的，想獲取到該元素，需要在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塌陷（發(fā)生在兩個盒子嵌套的時候，父盒子和子盒子同時設置margin的時候會出現(xiàn)實際的magin取的是兩個margin的最大值）
解決辦法：
給父元素增加
overflow:hidden
如何獲取并操作dom元素
方法一：
直接給的元素加id,使用document.getElementById(“id”)獲取，然后操作 dom 元素
mounted(){
?? ?this.element = document.querySelector('#element_1');
?? ?this.element.style.color = "red";
}為什么是在mouted鉤子使用？
因為只有在執(zhí)行mounted的時候，vue才已經渲染了dom節(jié)點，這個時候是可以獲取dom節(jié)點的
方法二：
使用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實現(xiàn)3D餅圖環(huán)形餅圖
現(xiàn)在vue是很多公司前端的主流框架,我目前所在公司接觸的項目也都是使用vue來實現(xiàn)的,很少有完全使用原生的JavaScript來寫項目的了,下面這篇文章主要給大家介紹了關于vue中如何使用echarts和echarts-gl實現(xiàn)3D餅圖環(huán)形餅圖的相關資料,需要的朋友可以參考下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中監(jiān)聽變量變化的方法,本文通過一個場景，父組件傳遞子組件一個A參數(shù)，子組件需要監(jiān)聽A參數(shù)的變化轉換為state，具體內容詳情大家跟隨小編一起通過本文學習吧2018-11-11
antv完成區(qū)間柱形圖一列多柱配置實現(xiàn)詳解
這篇文章主要為大家介紹了antv完成區(qū)間柱形圖一列多柱配置實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
解讀計算屬性和watch監(jiān)聽的區(qū)別及說明
計算屬性是基于它們的依賴進行緩存的,只有在它的相關依賴發(fā)生改變時才會重新求值,而watch則是一個更為通用的監(jiān)聽器,它可以在數(shù)據(jù)變化時執(zhí)行異步操作或開銷較大的操作2025-01-01
這兩天在學習vue，主要是為了實現(xiàn)前后端的分離，因此數(shù)據(jù)的傳輸是必不可少的一個環(huán)節(jié)，這篇文章主要介紹了JSON數(shù)組和JSON對象在vue中的獲取方法,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue刷新后瞬間閃爍,無法解析的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
本文主要介紹了vue v-on傳遞參數(shù)和事件修飾符的使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01