原文地址

方法一：

直接给相应的元素加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. LNMP原理

    在linux系统中,LNMP是目前网站主流架构之一,LNMP中L指linux系统平台,N是nginx指网站的前端程序,发布静态页面和调用外部程序解析动态页面,M是mysql指网站的后台数据库,P是PH ...

  2. oracle之约束-主键、非空、唯一、check、外键、默认

    --首先添加主键约束alter table studentadd constraint PK_student_sno primary key(sno) --删除约束alter table studen ...

  3. struts2提交表单注意事项 （3）

    供应商模块 需求:实现供应商的列表.添加.修改.删除三个功能 注意:修改时,不允许修改供应商编号 添加时,不允许显现的添加供应商编号 删除时,进行逻辑删除(根据主键将该条数据不再显示在列表) 物理删除 ...

  4. Codeforces Round #590 (Div. 3) C. Pipes

    链接: https://codeforces.com/contest/1234/problem/C 题意: You are given a system of pipes. It consists o ...

  5. 创建节点--DOM树

    创建节点 快捷键:innerhtml outerhtml innertext outertext ==============创建节点方法有两种:============== <script s ...

  6. Python JSONⅢ

    JSON 函数 encode Python encode() 函数用于将 Python 对象编码成 JSON 字符串. 语法 实例 以下实例将数组编码为 JSON 格式数据: 以上代码执行结果为: d ...

  7. App自动化-python-Unittest框架

    TestCase: 一段Testcase代码示例: # -*- coding: utf-8 -*- ''' Created on 2019-6-27 @author: adminstrator ''' ...

  8. Java字节码例子解析

    举个简单的例子: public class Hello {     public static void main(String[] args) {         String string1 = ...

  9. Python基础之集合set

    集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型), 但是集合本身是不可哈希的(所以集合做不了字典的键)的. 以下是集合最重要的两点: (1)去重,把一个列表变成集合,就自动去重了. ...

  10. OpsManage安装过程中遇到的问题和解决方案

    系统地址:https://github.com/welliamcao/OpsManage 系统:ubuntu ubuntu使用apt-get进行自动化安装 自带python2.7,不需要再次安装 1. ...