在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而达到操作该dom元素,以下是个参考例子

 1 <template>
2 <div>
3 <div id="box" ref="mybox">
4 DEMO
5 </div>
6 </div>
7 </template>
8
9 <script>
10 export default {
11 data () {
12   return {
13
14 }
15 },
16 mounted () {
17   this.init();
18 },
19 methods:{
20  init() {
21   const self = this;
22   this.$refs.mybox.style.color = 'red';
23   setTimeout(() => {
24     self.$refs.mybox.style.color = 'blue';
25   },2000)
26 }
27 }
28
29 }
30 </script>
31
32 <style scoped>
33 #box {
34 width: 100px;
35 height: 100px;
36 line-height: 100px;
37 text-align: center;
38 border: 1px solid black;
39 margin: 50px;
40 color: yellow;
41 }
42 </style>

在vue中操作dom元素的更多相关文章

  1. Vue中获取dom元素

    Vue.js虽然说是数据驱动页面的,但是有时候我们也要获取dom对象进行一些操作. vue的不同版本获取dom对象的方法不一样 Vue.js  1.0版本中,通过v-el绑定,然后通过this.els ...

  2. vue中操作Dom节点的方法

    1.vue中ref操作dom节点 <template> <div id="app"> <div </div> <button @cl ...

  3. 20.Vue中获取DOM元素和组件

    1.获取DOM元素和组件:this.$refs

  4. vue中一个dom元素可以绑定多个事件?

    其实这个问题有多个解决方法的  这里提出两点 第一种 第二种 现在dom上绑定一个 然后在你的methods中直接调用 如果要传参数  这时候千万别忘记 原创 如需转载注明出处 谢谢

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

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

  6. Vue中的DOM操作

    1.在要获取的标签中添加 ref="xx" 示例: <button ref="btn">一个按钮</button> 2.在 mounte ...

  7. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  8. Vue动态设置Dom元素宽高

    需求: slider侧边栏是宽度是动态的,使用jquery可以操作dom元素,设置宽高,但vue是避免操作dom的 <template> <div class="slide ...

  9. 【面试必备】javascript操作DOM元素

    前言 时间过的真快,不知不觉就到年底了.问问自己,这一年你对自己的工作满意吗? 评价标准是什么呢?当然是马云的那两条准则了:钱给到了吗?干的爽吗?如果答案都是no,那么,你准备好跳槽了吗? 为了应对年 ...

随机推荐

  1. 阿里社招Java面试题总结——面试官分享

    面试题 1.Java中的内存溢出是如何造成的 2.gc的概念,如果A和B对象循环引用,是否可以被GC? 3.Error.Exception和RuntimeException的区别,作用又是什么? 4. ...

  2. Linux执行后台work相关

    Linux的后台运行.关闭.查看后台任务 & ctrl+z jobs fg bg kill nohup setsid disown screen 1.& 加在命令的最后,可以把命令放到 ...

  3. 算法与数据结构基础 - 递归(Recursion)

    递归基础 递归(Recursion)是常见常用的算法,是DFS.分治法.回溯.二叉树遍历等方法的基础,典型的应用递归的问题有求阶乘.汉诺塔.斐波那契数列等,可视化过程. 应用递归算法一般分三步,一是定 ...

  4. Cookie的有效路径

    程序实现: protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletE ...

  5. Set集合、List集合

    集合体系:Collection.Map接口 存储数量不等的多个对象,不能存储基本数据类型,如存储基本数据类型会自动装箱 ======================================== ...

  6. 当 K8s 集群达到万级规模,阿里巴巴如何解决系统各组件性能问题?

    作者 | 阿里云容器平台高级技术专家 曾凡松(逐灵) 本文主要介绍阿里巴巴在大规模生产环境中落地 Kubernetes 的过程中,在集群规模上遇到的典型问题以及对应的解决方案,内容包含对 etcd.k ...

  7. python unittest+parameterized,单元测试框架+参数化

    总要写新的自动化测试模块,在这里把demo记录下来,后面方便自己直接复制粘贴 from nose_parameterized import parameterized import unittest ...

  8. Centos 7 配置tomcat服务器

    1.首先查看当前系统版本 uname -a 2.安装之前查看系统是否安装了java rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没 ...

  9. python库之turtle(图形绘制) 开启新的快乐源泉

    相信有不少人学习python 都是听了老前辈的推荐 “学python好,python有趣的代码多” 比如说画一只小狮子 这就是今天想要介绍的绘制图形库-turtle 如果也想这样画一只小狮子,或者其他 ...

  10. Maven 梳理-自动创建Maven项目(非web)

    mvn archetype:create和mvn archetype:generate create is deprecated in maven 3.0.5 and beyond,在maven3.0 ...