在vue中获取dom元素内容的方法


Posted in Javascript onJuly 10, 2017

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

<template> 
 <div> 
  <div id="box" ref="mybox"> 
   DEMO 
  </div> 
 </div> 
</template> 
 
<script> 
export default { 
 data () { 
  return { 
    
  } 
 }, 
 mounted () { 
  this.init(); 
 }, 
 methods:{ 
  init() { 
   const self = this; 
   this.$refs.mybox.style.color = 'red'; 
   setTimeout(() => { 
    self.$refs.mybox.style.color = 'blue'; 
   },2000) 
  } 
 } 
 
} 
</script> 
 
<style scoped> 
 #box { 
  width: 100px; 
  height: 100px; 
  line-height: 100px; 
  font-size: 20px; 
  text-align: center; 
  border: 1px solid black; 
  margin: 50px;  
  color: yellow; 
 } 
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
JS 文字符串转换unicode编码函数
May 30 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
js/html光标定位的实现代码
Sep 23 Javascript
简单方法判断JavaScript对象为null或者属性为空
Sep 26 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
详解Vue方法与事件
Mar 09 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 #Javascript
vue轮播图插件vue-awesome-swiper的使用代码实例
Jul 10 #Javascript
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 #Javascript
vue实现表格数据的增删改查
Jul 10 #Javascript
激动人心的 Angular HttpClient的源码解析
Jul 10 #Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 #Javascript
You might like
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
onclick与listeners的执行先后问题详细解剖
2013/01/07 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
浅谈javascript中字符串String与数组Array
2014/12/31 Javascript
js获取会话框prompt的返回值的方法
2015/01/10 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
详解python中eval函数的作用
2019/10/22 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
物资采购方案
2014/06/12 职场文书
国庆促销活动总结
2014/08/29 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
2014年市场部工作总结
2014/11/25 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS