1、在要获取的标签中添加 ref="xx"

示例:

<button ref="btn">一个按钮</button>

2、在 mounted 钩子中使用 this.$refs.xx. 获取并操作 DOM 元素

示例:

mounted() {
this.$refs.btn.style.backgroundColor="red"
}

3、vue 操作 DOM 完整示例:

template 部分:

<template>
<div>
<button ref="btn">一个按钮</button>
</div>
</template>

script 部分:

<script>
export default {
data () {
return { }
},
mounted () {
this.$refs.btn.style.backgroundColor = 'red'
}
}
</script>

Vue中的DOM操作的更多相关文章

  1. [记录] Vue中的dom操作

    使用过Vue的同学都应该有这样一个感觉,在vue中页面是基于数据驱动的,不需要我们自己操作dom,框架帮我们完成了这一步,事实上Vue官方也建议我们这样做 在绝大多数情况下是不需要操作dom就可以完成 ...

  2. 第七十六篇:ref引用(在vue中引用Dom的方法)

    好家伙, 引子: jQuery简化了程序员操作DOM的过程 vue 优势:MVVM 在vue中,程序员不需要操作DOM.程序员只需要把数据维护好即可!(数据驱动视图) 那么若要在vue中操作dom,这 ...

  3. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  4. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  5. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  6. Jquery:jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  7. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  8. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  9. 第三章(jQuery中的DOM操作)

    3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...

随机推荐

  1. CentOS 6 新装服务器部署流程

    1.设置时区 rm -f /etc/localtime cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 2.配置内网IP (如果是外网IP,li ...

  2. 【GStreamer开发】GStreamer基础教程06——媒体格式和pad的Capabilities

    目标       Pad的Capabilities是一个GStreamer element的基础,因为framework大部分时间是自动处理的,所以我们几乎感觉不到它的存在.本教程比较偏向原理,介绍了 ...

  3. VC.DNS解析(winsock)

    1.尝试了 gethostbyname(...) 和 Qt598中的qhostinfo::fromname(...),都可以解析出来IP,但是有一个问题:域名指向的IP改变了,这两种方式需要等较长时间 ...

  4. c++ 在Ubuntu系统中使用access函数

    include<iostream> #include<stdlib.h> #include<stdio.h> #include<unistd.h> us ...

  5. jvm误区--动态对象年龄判定

    原文链接:https://blog.csdn.net/u014493323/article/details/82921740 虚拟机并不是永远地要求对象的年龄必须达到了MaxTenuringThres ...

  6. js里typeof和instanceof和箭头表达式要注意的地方,以及其他

    如果学过类似C#这样的语言,然后定义两个类class Mu{}和class Ku{},那么显然typeof Mu != typeof Ku的,但是在js里则不是这样,对于Mu和Ku的对象进行typeo ...

  7. Eclipse控制台不限日志行数

    在使用Eclipse时,如果控制台输出的内容比较多,控制台之前的内容就会消失,导致前面的控制台打印信息无法查看. 设置Eclipse的控制台属性 设置方法: 打开Eclipse的菜单栏:Window ...

  8. Java中XML的四种解析方式(一)

    XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性给数据集成与交互带来了极大的方便.XML在不同的语言环境中解析的方式都是一样的,只不过实现的语法不同而已. XML文档以层级标签的 ...

  9. Visual Studio 设置为 UTF-8 保存格式

    1. 步骤 Visual Studio 提供高级保存选项功能,它能指定特定代码文件的编码规范和行尾所使用的换行符. 在 VS 中,该命令没有默认显示在「文件」菜单中.用户需要手工设置,才能显示该命令. ...

  10. 公钥、私钥、数字签名、数字证书、对称与非对称算法、HTTPS

    作者: yoyoso https://my.oschina.net/ioslighter/blog/359207 对公钥和私钥有点稀里糊涂的,搜索了一些资料,作一些整理吧,先看这个: 加密--公钥 看 ...