这里我想到了2个方法:

方法一:

直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式

方法二:

使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素

注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空,

     如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值

    如果给子组件加ref,然后获取到该DOM元素之后改变相应的自定义属性的值,vue会报错:

 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title"

vue获取DOM元素并设置属性的更多相关文章

  1. vue获取dom元素内容

    通过ref来获取dom元素 在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...

  2. vue获取dom元素注意问题

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...

  3. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  4. Vue获取DOM元素的属性值

    项目中需要做一个小弹层,如下图: 我需要知道点击元素距离顶部的值,再计算弹层的top值,如下图: 在vue中如何获取到DOM元素距离窗口顶部的值呢? 1.通过$event获取 html: <di ...

  5. Vue 获取DOM元素ref

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue获取dom元素

     <li  @click='获取li标签'    :ref="center-li" id="center-li"      > =====我是li标 ...

  7. Vue 获取dom元素之 ref 和 $refs 详解

    一.$refs 一个对象,持有ref注册过的所有元素或子组件.(注册过的 ref 的集合) 二.ref 被用来给元素或子组件注册引用信息.若用在dom元素上,引用指向的就是dom元素:若用在子组件上, ...

  8. Vue获取DOM元素样式 && 样式更改

    在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误, 这时候可以在 mounted 里用 $refs 来获取样 ...

  9. jQuery捕获-获取DOM元素内容和属性

    一.获取内容 1.text()-设置或返回所选元素的文本内容 2.html()-设置或返回所选元素的内容(包括HTML标记) 3.val()-设置或 返回表单字段的值 $(document).read ...

随机推荐

  1. python全栈 字典数据类型相关知识及操作

    python 全栈开发 一.字典 1. 字典的概念: 字典 : dict 用 {} 来表示,   键位值数据. { key , value }    具有唯一性. 键:都必须是可哈希的     不可变 ...

  2. sqlserver 事务嵌套

    参考 https://www.cnblogs.com/JentleWang/p/3654603.html https://blog.csdn.net/tuzhen007/article/details ...

  3. commit 流程

    COMMIT是一个非常快的操作,当我们发布commit命令时,真正困难的动作已经完成,在数据库中已经执行了数据更改,所以已经完成了99%的任务,例如:下列操作已经产生: 1.在SGA(Buffer C ...

  4. java多线程与并发笔记

    0.多线程,主要用来提高程序效率,处理耗时的操作. 多个线程写在同一个类里调用,并不是说写在前面的线程就会先运行.各个线程会进行争抢,能抢到系统资源的才会先运行. 因此,同一个程序,多个线程运行,可能 ...

  5. php 两个值进行比较的问题

    php手册运算符中有介绍: 比较多种类型-- 如var_dump([ ] > 0); // 结果为true 运算数 1 类型 运算数 2 类型 结果 null 或 string string 将 ...

  6. 二:python 对象类型概述

    1,为什么使用内置类型: a)内置对象使程序更容易编写 b)内置对象是扩展的组件 c)内置对象往往比定制的数据结构更加高效 d)内置对象是语言的标准的一部分 2,python  的主要内置对象 对象类 ...

  7. centos 7 下 TFTP服务器安装

    一.介绍 TFTP(Trivial File Transfer Protocol,简单文件传输协议)),是一个基于UDP 协议 69端口 实现的用于在客户机和服务器之间进行简单文件传输的协议提供不复杂 ...

  8. POJ-1321.棋盘问题.(回溯)

    做完题之后看了网上的一些题解但是发现他们的解释大部分都是错误的,所以就自己写了一下,笔者能力也有限,有错误之处大家多多指正. 第一次看题的时候以为就是简单的八皇后,但是写了之后发现存在很多问题,比如需 ...

  9. [Unity3D]降低向Shader中传值的开销

    Unity3D中提供了很多API用于向shader传值,这篇文章对比测试了两类不同的使用方法的性能. 正文 Unity3D中,通过C#代码向shader传值有两种方式. 一种是面向具体的materia ...

  10. [Java学习]常用类-包装类型

    八种基本类型对应的包装类 Java中的数据类型由八种基本类型,以及引用类型组成. byte short int long float double boolbean char Object 为了方便, ...