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

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

vue2 如何操作dom的更多相关文章

  1. Javascript操作DOM常用API总结

    基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这 ...

  2. mui项目中如何使用原生JavaScript代替jquery来操作dom 转自【B5教程网】:http://www.bcty365.com/content-146-3661-1.html

    最近在用mui写页面,当然了在移动App里引入jq或zepto这些框架,肯定是极不理性的.原生JS挺简单,为何需要jq?jq的成功当时是因为ie6.7.8.9.10.chrome.ff这些浏览器不兼容 ...

  3. 操作DOM

    操作dom一般是如下4个:更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容:遍历:遍历该DOM节点下的子节点,以便进行进一步操作:添加:在该DOM节点下新增一个子节点,相当于 ...

  4. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

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

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

  6. HTML(.js) – 最简单的方式操作 DOM 的 JS 库

    HTML(.js) 是一个轻量的(压缩后~2kb) JavaScript 库,简化了与 DOM 交互的方法. 这个 JavaScript 库的方法可读性很好,并具有搜索和遍历 DOM 的方法.相比 j ...

  7. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  8. 廖雪峰js教程笔记11 操作DOM(包含作业)

    由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新 ...

  9. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

随机推荐

  1. iOS之ProtocolBuffer搭建

    一.环境安装:pb编译器的安装 1.从https://github.com/google/protobuf/releases下载protocolBuffer对应版本编译器包,比如目前的对应的objc最 ...

  2. 使用btrace来找出执行慢的方法

    转载于:https://shaojun.name/2016/07/260 btrace script import static com.sun.btrace.BTraceUtils.name; im ...

  3. java restful接口

    用json-lib的jar包输出json串: public void responseJason(HttpServletResponse response, Object obj){ ObjectMa ...

  4. C语言学习笔记 (008) - C语言字符串操作总结大全(超详细)(转)

    1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长度 ...

  5. 树莓派进阶之路 (009) - 树莓派ftp脚本(原创)

    FTP.sh #!/bin/sh cd echo "彻底卸载原有的ftp" sudo apt-get remove --purge vsftpd #(--purge 选项表示彻底删 ...

  6. 【Oracle】浅析Oracle中的事务

    1. 什么是事务 在数据库中事务是工作的逻辑单元,一个事务是由一个或多个完成一组的相关行为的SQL语句组成,通过事务机制确保这一组SQL语句所作的操作要么都成功执行,完成整个工作单元操作,要么一个也不 ...

  7. block(七)__block和__weak的区别-b

    在MRC下,我们通常使用__block , 而在ARC下我们通常使用__weak , 或者__unsafe_unretaine __block(不安全,不建议使用) 来修饰对象防止循环引用而造成的内存 ...

  8. Java中Map相关的快速查找算法与唯一性(转载)

    原文地址:http://blog.csdn.net/chuyuqing/article/details/19629229 在对<Set和hashCode()>的一篇原创文章写完后,由于对自 ...

  9. shell value too great for base

    今天同步文件的时候发现了这个问题: 原因是: tar_file_month=`date +%m` rsync -auzq --exclude=))"]" 当月是8月,tar_fil ...

  10. 【转】Braid - 一个发人深思的游戏

    Braid - 一个发人深思的游戏 我已经很久很久没有打游戏了(如果不算 Angry Birds 之类用来打发时间的游戏的话).我的最后一个真正意义上的游戏机,是 PlayStation 1.在那上面 ...