这里我想到了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. JUC(java.util.concurrent)

    在 Java 5.0 提供了 java.util.concurrent (简称JUC )包,在此包中增加了在并发编程中很常用的实用工具类,用于定义类似于线程的自定义子系统,包括线程池.异步 IO 和轻 ...

  2. asp.net mvc areas

    http://www.codeproject.com/Articles/714356/Areas-in-ASP-NET-MVC

  3. day11 闭包函数和装饰器

    1.函数不是新知识点 主要是学习函数的用法 在面向对象编程中,一切皆对象,函数也不例外 具体的表现 1.函数可以引用 2.函数可以作为函数的参数 3.函数可以作为函数的返回值 4.可以被存储到容器类型 ...

  4. Windows Server2012 R2 安装.NET Framework 3.5失败解决方法

    转载:https://blog.csdn.net/F12138_/article/details/80220698 显示需要指定备用路径,但我没有指定 然后就出现了的失败T T! 由于我无法访问安装盘 ...

  5. sys系统用户长时间未登录导致密码过期

    ORA-28001: the password has expired (DBD ERROR: OCISessionBegin) 问题描述:当登陆em时使用sys帐号登陆进去后,数据库实例提示ORA- ...

  6. 过滤sql特殊字符方法集合

    /// <summary>     /// 过滤不安全的字符串    /// </summary>     /// <param name="Str" ...

  7. PHPWAMP集成环境配置ssl证书

    和apache配置ssl证书流程一样, LoadModule socache_shmcb_module modules/mod_socache_shmcb.so LoadModule ssl_modu ...

  8. python基础入门学习简单程序练习

    1.简单的乘法程序 i = 256*256 print('The value of i is', i) 运行结果: The value of i is 65536 2.执行python脚本的两种方式 ...

  9. c++ 读入优化、输出优化模板

    0. 在有些输入数据很多的变态题中,scanf会大大拖慢程序的时间,cin就更慢了,所以就出现了读入优化.其原理就是一个一个字符的读入,输出优化同理,主要使用getchar,putchar函数. 1. ...

  10. Mac下Chrome浏览器的手机模拟器,开启模拟定位

    项目接入百度地图,浏览器调试时需要获取定位信息. 1 打开设置->高级->内容设置->位置,将定位设置为“使用前先询问”,并清空禁止列表. 2 审查元素->Network-&g ...