vue類名如何獲取動態生成的元素
2022-04-20 12:01:37 來源：易采站長站 作者：
目錄
類名獲取動態生成的元素如何獲取并操作dom元素類名獲取動態生成的元素
首先注意的是，該元素必須在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 操作屬性獲取
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持易采站長站。
如有侵權，請聯系QQ:279390809 電話：15144810328
最新圖文推薦
相關文章
-
如果管理員遇到這樣的情況的話就需要注意了你的服務器可能被入侵了。 一般黑客都將這種的添加賬號的手段稱為不死賬戶 首先我們來了解建立不死賬戶的方法， 1.黑客其將guest用戶放2019-01-25
-
少壯不努力，長大遇啊D ----某大黑客 D盾有多不爽我就不說了，現在都是批量注入，時不時的彈出D盾提示，甚是惱人。。。。。 其實這個并不是我發現的，而是國外的一個注入工具。某2019-01-26
-
DDOS攻擊也叫做分布式拒絕服務攻擊，其英文全稱為Distributed Denial of Service attack。流量獲取是DDOS攻擊的最重要一環，黑客主要通過獲取廠商服務器的上行流量，致使你的服務器、電腦所屬2019-01-25
-
現在很多單位都有文件服務器，經常會共享文件讓局域網用戶訪問。但是，對于大多數網管員來說，服務器共享文件管理一直是一個讓人棘手的問題。一方面，我們必須要把服務器文件2018-12-18
-
IPSEC野蠻模式簡介： IKE 的協商模式 在RFC2409（The Internet Key Exchange ）中規定，IKE 第一階段的協商可以采用兩種模式：主模式（Main Mode ）和野蠻模式（Aggressive Mode ）。 主模式被設計成將2019-01-26
-
1. QQ空間某處正則混亂，導致惡意構造。 2. QQ空間某文件存在潛在風險 3. 1+2 = 此漏洞 詳細說明： 1. 一開始的目標是這個http://b.qzone.qq.com/cgi-bin/custom/modify_custom_window.cgi，這個頁面是用來2019-01-26
-
Rop是借鑒淘寶開發平臺實現的全功能Rest Web Service 開源框架，提供了請求/響應序列化、數據檢驗、會話管理、安全管理等高級主題的東西。 前言 隨著漏洞緩解技術的不斷發展，常用的2018-12-20
-
i 首先請大家看這么一個簡單的小程序： #includestdio.h voidmain() { inti,b[10]; for(i=0;i=10;i++) { b[i]=0; } } 請問這個程序是否有錯？A.正常 B.越界 C.死循環 正確答案是C，相信選A或選B的朋友一定會2019-01-26
豫公網安備 41019702003123號