欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue類名如何獲取動(dòng)態(tài)生成的元素

 更新時(shí)間：2022年04月20日 10:38:25   作者：北嶺有燕  
這篇文章主要介紹了vue類名如何獲取動(dòng)態(tài)生成的元素，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

類名獲取動(dòng)態(tài)生成的元素

首先注意的是，該元素必須在id為app這個(gè)元素里面

?new Vue({
? ?el: "#app",
? })

其次是由于動(dòng)態(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)問(wèn)題：

盒子的margin塌陷（發(fā)生在兩個(gè)盒子嵌套的時(shí)候，父盒子和子盒子同時(shí)設(shè)置margin的時(shí)候會(huì)出現(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 獲取到該元素，再對(duì)元素進(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)文章

最新評(píng)論