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 操作属性获取

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 获取元素额外生成的data-v-xxx操作

    需求描述:由于样式中使用了scoped,所以编译后标签对中生成data-v-xxx属性.在[.dialog_content]的div中 动态添加元素节点p和span时,也需要给元素节点添加data-v-xxx属性.由于data-v-xxx属性是会变化的,那如何获取它,添加在动态添加的元素节点中呢?本博客将给出解决方案. [解决方法] 获取属性名[document.getElementById("dialog_submit").attributes[0].name] 设置属性[nodeP

  • vue.js click点击事件获取当前元素对象的操作

    Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: { message: 'He

  • vue如何获取指定元素

    目录 如何获取指定元素 点击获取相应元素 如何获取指定元素 在想要获取元素上添加“ref”  ref="scroll"  scroll为函数名 <div ref="scroll">vue获取指定元素</div>  xiaFn:function(){     console.log(this.$refs.scroll)  } 点击获取相应元素 在vue中通过点击事件获取上一个标签.父标签.第一个子标签等元素. 以下元素都是以所点击的元素进行查找

  • vue实现动态给id赋值,点击事件获取当前点击的元素的id操作

    :id绑定 :id="'a_'+index" 输出的id为a_0,a_1..... <div v-for="(item,index) in list" :key="index" > <div :id="'a'+index" @click="b(index)">哈哈哈</div> </div> 然后在vue的实例中就可以拿到对应的id b(index){ thi

  • vue第一次获取不到元素的解决方法记录

    前言 vue中第一次获取不到元素的解决办法,是否经常第一次点击弹窗按钮,获取弹窗中的元素.打开弹窗获取元素为空,要第二次才能获取. 一.更新dom后获取 this.$nextTick(callback) methods: { play() { //获取元素 console.log($('#video')); this.$nextTick(function() { //获取元素 console.log($('#video')); }); } } 二.通过定时器获取 setTimeOut(fn, 0

  • vue3使用自定义hooks获取dom元素的问题说明

    目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from

  • vue类名如何获取动态生成的元素

    目录 类名获取动态生成的元素 如何获取并操作dom元素 类名获取动态生成的元素 首先注意的是,该元素必须在id为app这个元素里面  new Vue({    el: "#app",   }) 其次是由于动态生成的,想获取到该元素,需要在created里使用nextTick. 并且可以 $(’.circle’ + i)拼接想要的元素类名.   this.$nextTick(() => {       for (var i = 1; i < this.carlist.leng

  • jQuery获取动态生成的元素示例

    jQuery获取动态生成的元素示例

    需求描述:页面上可以动态添加数据,比如table,点击按钮可以动态添加行.又或页面 加载时table数据是通过ajax从后台获取的.而这时我们想要获取其中的某个值,又该如何获取呢? 如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live()方法 复制代码 代码如下: $(".button").live("click",function(){ console.info($("#mytd").html()); }) 而

  • vue 实现拖拽动态生成组件的需求

    vue 实现拖拽动态生成组件的需求

    产品需求 开完产品需求会议,遇到了一个需求,首先页面分成两栏布局,左侧展示数据组件,支持拖拽排序,点击按钮清除组件.右侧支持将组件的缩略图拖拽至左侧生成一个新的组件. 思路 对于动态生成组件来说每一次都要是生成全新的一个组件,那么就可以把 组件放进函数当中 return.在JSX中调用函数,每次调用函数都会返回一个全新的组件.这对React来说非常简单,但是对于Vue来说,直接将组件返回是不可能的.尽管这个 return 写法不适合Vue,但是我们不可否认,思路是非常正确的,所以我们应该考虑一个

  • vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信

    父组件 定义表头和表内容 data(){ return{ // 表格数据 tableColumns: [], // 表头数据 titleData:[], } } 引入并注册子组件 import TableComponents from "../../components/table/table"; //注册子组件table components: { tableC: TableComponents }, 获取表头和表内容数据.(真实数据应该是从接口获取的,由于是测试数据这里我先写死)

  • AngularJS实现给动态生成的元素绑定事件的方法

    本文实例讲述了AngularJS实现给动态生成的元素绑定事件的方法.分享给大家供大家参考,具体如下: 1 . 我们知道在jQuery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法). 2 . 在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular.module('

  • Java爬虫Jsoup+httpclient获取动态生成的数据

    Java爬虫Jsoup+httpclient获取动态生成的数据

    Java爬虫Jsoup+httpclient获取动态生成的数据 前面我们详细讲了一下Jsoup发现这玩意其实也就那样,只要是可以访问到的静态资源页面都可以直接用他来获取你所需要的数据,详情情跳转-Jsoup爬虫详解,但是很多时候网站为了防止数据被恶意爬取做了很多遮掩,比如说加密啊动态加载啊,这无形中给我们写的爬虫程序造成了很大的困扰,那么我们如何来突破这个梗获取我们急需的数据呢, 下面我们来详细讲解一下如何获取 String startPage="https://item.jd.com/1147

  • jquery无法为动态生成的元素添加点击事件的解决方法(推荐)

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <div> <ul> <li> <span> <i class='icon'>这是元素内容</i> //i是动态生成 </span> </li> </ul> </div> 解决方法如下: $(docu

  • jQuery动态生成的元素绑定事件操作实例分析

    jQuery动态生成的元素绑定事件操作实例分析

    本文实例讲述了jQuery动态生成的元素绑定事件操作.分享给大家供大家参考,具体如下: 这段时间在写代码的时候遇到一个问题,通过append()添加的节点,点击事件不起作用.当时我百思不得其解,各种找错都没找到错误的原因.后来才发现是动态生成节点的问题,还是自己没有经验啊. 下面来总结一下这个问题的始末,温故而知新. 先看下click绑定事件的效果. <div> <p>a</p> <p>b</p> <p>c</p> <

  • vue和iview结合动态生成表单实例

    目录 一.构建myform组建 二.构建myFormItem组建 三.构建函数式组件mycontrl组件 四.用户输入的时候需要对表单项中进行各种验证或者逻辑 五.表单输入完成获取表单中的值 六.在要用到表单的页面使用 在项目中,表单作为用户输入占用很重要的一部分,目前的前端框架,基本对表单进行了一些简单的封装,如果输入项很多,以iview为例,会有一大堆的类似: <FormItem label="Input">             <Input v-model=

  • jQuery如何获取动态添加的元素

    jQuery如何获取动态添加的元素

    一.问题描述 用jQuery的append()方法动态添加了一段html代码之后,发现在为新添加的元素绑定click事件时无法获取该新元素. 二.解决方法 度娘推荐的方法基本是用live()方法 live()的官方定义和用法: live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). live()的详细使用方法可以查看jQuery live() live()和

随机推荐