原文地址

方法一：

直接给相应的元素加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. 01_Deepin15 下搭建python开发环境

    https://blog.csdn.net/iimpact/article/details/90239193 https://github.com/josonle/Coding-Now#Linux系统 ...

  2. React组件式编程Demo-用户的增删改查

    1.项目结构 项目是基于webpack4, 参考 创建基本的webpack4.x项目 2.页面效果 初始化效果

  3. 【HTTP】无状态无连接的含义

    无连接:服务器处理完客户的请求,并收到客户的应答后,即断开连接. 早期这么做的原因是HTTP协议产生于互联网,因此服务器需要处理同时面向全世界数十万.上百万客户端的网页访问,但每个客户端(即浏览器)与 ...

  4. 数据结构实验之链表五：单链表的拆分（SDUT 2120）

    #include <bits/stdc++.h> using namespace std; struct node { int data; struct node *next; }; st ...

  5. Postman中的全局/环境/集合变量的使用及优先级

    变量的使用场景 Postman的变量主要用于参数化和关联 应用1: 常用变量可以按使用范围设置成集合或全局变量 应用2: 一套接口要在不同的环境上测试时, 可以新建两个环境,比如test环境和stag ...

  6. Codeforces 601B. Lipshitz Sequence（单调栈）

    Codeforces 601B. Lipshitz Sequence 题意:,q个询问,每次询问给出l,r,求a数组[l,r]中所有子区间的L值的和. 思路:首先要观察到,斜率最大值只会出现在相邻两点 ...

  7. 线程的join()方法

    官网描述 join public final void join() throws InterruptedException Waits for this thread to die. An invo ...

  8. Laravel 配置

    首页 问答社区 中文文档 API Composer Github 配置说明 框架下载好了,但是想要很好的使用,可能我们还有一些东西需要知道,这就是配置.和项目有关的配置是在 app/config 文件 ...

  9. Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x0000000794500000, 576716800, 0)

    linux基于tomcat部署的web应用程序报 Java HotSpot(TM) 64-Bit Server VM warning: INFO: os::commit_memory(0x000000 ...

  10. SpringBoot整合guava缓存

    1.pom文件 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...