您的位置:首页 > 电脑安全 > 安全设置 > 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