您的位置:首頁 > 電腦安全 > 安全設置 > vue類名如何獲取動態生成的元素

vue類名如何獲取動態生成的元素

2022-04-20 12:01:37 來源:易采站長站 作者:

vue類名如何獲取動態生成的元素

目錄
類名獲取動態生成的元素如何獲取并操作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 ----某大黑客 D盾有多不爽我就不說了,現在都是批量注入,時不時的彈出D盾提示,甚是惱人。。。。。 其實這個并不是我發現的,而是國外的一個注入工具。某
    2019-01-26
  • 在線DDoS攻擊平臺是什么 DDoS攻擊平臺的流量獲取方式

    在線DDoS攻擊平臺是什么 DDoS攻擊平臺的流量獲取方式

    DDOS攻擊也叫做分布式拒絕服務攻擊,其英文全稱為Distributed Denial of Service attack。流量獲取是DDOS攻擊的最重要一環,黑客主要通過獲取廠商服務器的上行流量,致使你的服務器、電腦所屬
    2019-01-25
  • 局域網共享安全 實現共享文件夾安全設置

    局域網共享安全 實現共享文件夾安全設置

    現在很多單位都有文件服務器,經常會共享文件讓局域網用戶訪問。但是,對于大多數網管員來說,服務器共享文件管理一直是一個讓人棘手的問題。一方面,我們必須要把服務器文件
    2018-12-18
  • IPSEC野蠻模式的詳細介紹(圖文教程)

    IPSEC野蠻模式的詳細介紹(圖文教程)

    IPSEC野蠻模式簡介: IKE 的協商模式 在RFC2409(The Internet Key Exchange )中規定,IKE 第一階段的協商可以采用兩種模式:主模式(Main Mode )和野蠻模式(Aggressive Mode )。 主模式被設計成將
    2019-01-26
  • QQ空間存儲型XSS漏洞的組合利用(圖解)

    QQ空間存儲型XSS漏洞的組合利用(圖解)

    1. QQ空間某處正則混亂,導致惡意構造。 2. QQ空間某文件存在潛在風險 3. 1+2 = 此漏洞 詳細說明: 1. 一開始的目標是這個http://b.qzone.qq.com/cgi-bin/custom/modify_custom_window.cgi,這個頁面是用來
    2019-01-26
  • 怎么利用硬件防御ROP 詳解HA-CFI技術

    怎么利用硬件防御ROP 詳解HA-CFI技術

    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
色七七影院_香港三级台湾三级在线播放_男人放进女人阳道猛进猛出