编程 Javascript

基于vue1和vue2获取dom元素的方法

Posted in Javascript onMarch 17, 2018

vue1.*版本中

在标签中加上el='dom'，然后在代码中this.$els.dom这样就拿到了页面元素

例如：<div class='box' v-el: myBox>你好</div>

让你好的颜色显示为红色：this.$els.my-box.style.color = 'red'

vue2.*版本中

在标签中加上ref='dom'，然后在代码中this.$refs.dom这样就拿到了页面元素

例如：<div class='box' ref='myBox'>你好</div>

让你好的颜色显示为红色：this.$refs.myBox.style.color = 'red

以上这篇基于vue1和vue2获取dom元素的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

基于vue1和vue2获取dom元素的方法

- Author -

mengyunxiu121415

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

用javascript来实现动画导航效果的代码

Dec 16 Javascript

JS面向对象编程之对象使用分析

Aug 19 Javascript

JavaScript中提前声明变量或函数例子

Nov 12 Javascript

IE中鼠标经过option触发mouseout的解决方法

Jan 29 Javascript

javascript实现网页子页面遍历回调的方法（涉及 window.frames、递归函数、函数上下文）

Jul 27 Javascript

微信小程序实战小程序实例

Oct 08 Javascript

JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

Dec 19 Javascript

详解VUE Element-UI多级菜单动态渲染的组件

Apr 25 Javascript

Vue 无限滚动加载指令实现方法

May 28 Javascript

JSONP解决JS跨域问题的实现

May 25 Javascript

解决elementUI 切换tab后 el_table 固定列下方多了一条线问题

Jul 19 Javascript

vue3如何优雅的实现移动端登录注册模块

Mar 29 Vue.js

解决vue页面DOM操作不生效的问题

Mar 17 #Javascript

vue中实现先请求数据再渲染dom分享

Mar 17 #Javascript

vue 每次渲染完页面后div的滚动条保持在最底部的方法

Mar 17 #Javascript

vue获取当前激活路由的方法

Mar 17 #Javascript

vue 实现复制内容到粘贴板clipboard的方法

Mar 17 #Javascript

echarts鼠标覆盖高亮显示节点及关系名称详解

Mar 17 #Javascript

vue结合Echarts实现点击高亮效果的示例

Mar 17 #Javascript

You might like

php array_map array_multisort 高效处理多维数组排序

2009/06/11 PHP

PHP清除数组中所有字符串两端空格的方法

2014/10/20 PHP

PHP面向对象之事务脚本模式(详解)

2017/06/07 PHP

Laravel手动返回错误码示例

2019/10/22 PHP

php操作redis数据库常见方法实例总结

2020/02/20 PHP

javascript 动态添加事件代码

2008/11/30 Javascript

有效的捕获JavaScript焦点的方法小结

2009/10/08 Javascript

终于解决了IE8不支持数组的indexOf方法

2013/04/03 Javascript

jQuery自定义事件的简单实现代码

2014/01/27 Javascript

jquery实现图片随机排列的方法

2015/05/04 Javascript

js简单实现Select互换数据的方法

2015/08/17 Javascript

jQuery使用ajax跨域获取数据的简单实例

2016/05/18 Javascript

JS之获取样式的简单实现方法(推荐)

2016/09/13 Javascript

js实现表格筛选功能

2017/01/18 Javascript

通过npm引用的vue组件使用详解

2017/03/02 Javascript

AngularJS使用ng-class动态增减class样式的方法示例

2017/05/18 Javascript

React Native基础入门之初步使用Flexbox布局

2018/07/02 Javascript

详解关于vue2.0工程发布上线操作步骤

2018/09/27 Javascript

vue3.0 搭建项目总结(详细步骤)

2019/05/20 Javascript

js单线程的本质 Event Loop解析

2019/10/29 Javascript

vue使用vant中的checkbox实现全选功能

2020/11/17 Vue.js

Python 由字符串函数名得到对应的函数(实例讲解)

2017/08/10 Python

Python爬虫基础之XPath语法与lxml库的用法详解

2018/09/13 Python

解决Python2.7中IDLE启动没有反应的问题

2018/11/30 Python

Python文件打开方式实例详解【a、a+、r+、w+区别】

2019/03/30 Python

Python学习笔记之抓取某只基金历史净值数据实战案例

2019/06/03 Python

小 200 行 Python 代码制作一个换脸程序

2020/05/12 Python

python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法

2020/11/05 Python

python 实现ping测试延迟的两种方法

2020/12/10 Python

理肤泉加拿大官网：La Roche-Posay加拿大

2018/07/06 全球购物

大学生个人总结的自我评价

2013/10/05 职场文书

会计与审计专业自荐信范文

2014/03/15 职场文书

就业推荐表自我鉴定范文

2014/03/21 职场文书

2014年车间工作总结

2014/11/21 职场文书

企业计划生育责任书

2015/05/09 职场文书

SpringBoot2 参数管理实践之入参出参与校验的方式

2021/06/16 Java/Android