原文地址

方法一：

直接给相应的元素加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. pycharm连接云端mysql

    在阿里云上安装了一个mysql,打算用windows系统上面装的pycharm来操作 首先,右端有个database,点开它,点开加号 这里,general填的是mysql上面设置的密码,端口不用改了 ...

  2. mysql查询疯狂41例

    援引自 http://www.cnblogs.com/wupeiqi/articles/5748496.html 一.表关系请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生 ...

  3. 云主机用samba服务实现和windows共享文件

    最近刚刚入坑了百度云的云主机BCC,准备在云主机上实现samba服务,映射到本机来当硬盘使用,可是一直怎么试都不成功,后来咨询客服之后才知道samba默认使用的端口445端口被运营商封禁了,只好更改端 ...

  4. [RxJS] RxJS Advanced Patterns Operate Heavily Dynamic UIs

    Check the playground. import {Counter, CountDownState, ConterStateKeys, PartialCountDownState} from ...

  5. 开源笔记软件Joplin

    Joplin is a free, open source note taking and to-do application, which can handle a large number of ...

  6. Java数据库小项目01--实现用户登录注册

    先实现数据库和数据表,检测正常后再做其他的 CREATE TABLE users( username ) NOT NULL, PASSWORD ) NOT NULL); INSERT INTO use ...

  7. Educational Codeforces Round 33 (Rated for Div. 2) A题

    A. Chess For Three Alex, Bob and Carl will soon participate in a team chess tournament. Since they a ...

  8. 015_linuxC++之_覆写

    34.类成员函数的重载.覆盖和隐藏区别?答案:a.成员函数被重载的特征:(1)相同的范围(在同一个类中):(2)函数名字相同:(3)参数不同:(4)virtual 关键字可有可无.b.覆盖是指派生类函 ...

  9. IntelliJ IDEA 创建 Git 分支并且 Push 到远程

    在 IntelliJ 的右下角,你可以看到当前的 Git 分支,然后你可以单击这个分支后,在弹出的界面的最上方有一个新建分支的选项. 然后再弹出的界面中,输入你要创建的分支名称后回车输入. 然后从项目 ...

  10. 【csp模拟赛5】加减法--宽搜维护联通快

    题目大意: 一开始想用并查集,发现很难维护联通块的代表元素,所以用了宽搜,开数组会炸,所以开一个优先队列维护,每扫完一个联通块,统计答案,清空优先队列,!!千万记住注意数组的大小!!! 代码: #in ...