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