原文地址

方法一：

直接给相应的元素加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. java实现简单的单点登录 （转）

    摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统当中.本文从业务的角度分析了单点登录的需求和应用领域:从技术本身的角度分析了单点登录技术的内部机制和实现手段,并且给出Web-SSO ...

  2. Peter Shirley Ray Tracing in One Weekend(下篇)

    Peter Shirley-Ray Tracing in One Weekend (2016) 原著:Peter Shirley 下篇主要对本书的后5章节进行学习,包括材质球的Metal,和Diele ...

  3. BZOJ 3489: A simple rmq problem (KD-tree做法)

    KD树水过这道可持久化树套树-其实就是个三维偏序 题解戳这里 CODE #include <bits/stdc++.h> using namespace std; #define ls ( ...

  4. 【ArcMap】

    1.加载图层(1)内容列表中右键添加数据(2)目录列表中拖拽(3)导航中的添加数据 2.编辑要素(1)选中编辑器点击开始编辑(2)在编辑要素中选中要编辑的要素 选择构造工具 执行编辑操作(3)停止编辑 ...

  5. 洛谷P4979 矿洞：坍塌

    洛谷题目链接 珂朵莉树吼啊!!! 又是一道水题,美滋滋~~~ $A$操作完全模板区间赋值 $B$操作也是一个模板查询,具体看代码 注意:读入不要用$cin$,会$T$,如果你是大佬,会玄学东西当我没说 ...

  6. 【线性代数】2-2:消元(Eliminate)

    title: [线性代数]2-2:消元(Eliminate) toc: true categories: Mathematic Linear Algebra date: 2017-08-31 16:1 ...

  7. java 面试心得总结-BAT、网易

    http://blog.csdn.net/sinat_26812289/article/details/50898693

  8. python实现 单链表的翻转

    #!/usr/bin/env python #coding = utf-8 class Node: def __init__(self,data=None,next = None): self.dat ...

  9. python 绘制sinx

    code import turtle import math turtle.speed() turtle.penup() turtle., * math.sin((-/) * * math.pi)) ...

  10. 路由配置系统(URLconf)

    URL配置(URLconf)就像Django所支撑网站的目录. 它的本质是URL与要为该URL调用的视图函数之间的映射表.你就是以这种方式告诉Django,对于URL(1)调用代码(1), 对于URL ...