原文地址

方法一：

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

方法二：

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

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

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

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

返回目录

vue如何获取并操作DOM元素的更多相关文章

  1. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  2. 跨frame操作dom元素

    今天,一群友问到跨frame操作dom元素的问题.于是写了个demo,在此发表在博客里面,供其他同道中人参考! 创建child.html内容如下: <!DOCTYPE HTML PUBLIC & ...

  3. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

  4. JQUERY选择和操作DOM元素（利用正则表达式的方法匹配字符串中的一部分）

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  5. JS/JQuery操作DOM元素笔记

    原因 自己目前在搭建一个.NET Core的框架,正在构建权限这块的东西,今天设置权限界面,需要使用JavaScript操作DOM元素,记录一下. 页面大概是酱紫的(我使用的AdminLTE和LayU ...

  6. vue操作dom元素

    传统的方法获取dom元素操作dom,通常是获取类名,id,属性等来获取到dom,但在vue中获取组件dom的话会有问题,请看下面代码: 控制台打印出来的结果如下,你会发现正常标签可以正常显示,但是组件 ...

  7. 在vue中操作dom元素

    在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子 1 <template> 2 <div> 3 <div ...

  8. 不获取元素，直接使用id操作dom元素

    今天无意中发现个让我很吃惊的问题. 不使用getElementById方法,也可以用id直接操作有id的元素. 继续搜索后,发现name也可以直接操作... 这让我大感意外,了解以后,忍不住写点东西记 ...

  9. Js操作DOM元素及获取浏览器高宽

    在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM ...

随机推荐

  1. 洛谷P1006 传纸条【dp】

    题目:https://www.luogu.org/problemnew/show/P1006 题意: 给定一个m*n的矩阵,从(1,1)向下或向右走到(m,n)之后向上或向左走回(1,1),要求路径中 ...

  2. [codeforces792C][dp]

    https://codeforc.es/contest/792/problem/C C. Divide by Three time limit per test 1 second memory lim ...

  3. mysql批量新增和批量删除

    首先推荐使用PreparedStatement的批量处理操作. Connection conn = null; PreparedStatement stmt = null; try{ Class.fo ...

  4. Mysql数据库多对多关系未建新表

    原则上,多对多关系是要新建一个关系表的,当遇到没有新建表的情况下如何查询多对多的SQL呢? FIND_IN_SET(str,strlist) 官网:http://dev.mysql.com/doc/r ...

  5. 配置魔药(DP)

    配置魔药 [问题描述] 在<Harry Potter and the Chamber of Secrets>中,Ron的魔杖因为坐他老爸的Flying Car撞到了打人柳,不幸被打断了,从 ...

  6. Dockerfile中echo使用

    Dockerfile 中的echo的使用方式和bash中的使用方式是有区别的 下面是一个 Dockerfile 通过echo的方式更换apt-get源和pip源 FROM python:3.5.8-s ...

  7. Java 面试题 四

    1.序列化 File 类的介绍:http://www.cnblogs.com/ysocean/p/6851878.html Java IO 流的分类介绍:http://www.cnblogs.com/ ...

  8. CaoHaha's staff （HDU 6154）（2017中国大学生程序设计竞赛 - 网络选拔赛）

    Problem Description "You shall not pass!" After shouted out that,the Force Staff appered i ...

  9. vue 编译大量空格警告问题总结 warning: Replace `↹↹` with `&#183;&#183;`

    1.vue开发中发现最后越来越多的编译警告,如 warning: Replace `↹↹` with `··` (prettier/prettier) at src/views/shebei/shou ...

  10. HTML/HTML5 知识点思维导图

    1 - 浏览器 | 浏览器页面构成 2 - 浏览器 | 浏览器内核相关知识点 3 - W3C | 对WEB标准以及W3C的理解与认识? 4 - 标签 | Doctype相关知识点 5 - 标签 | m ...