在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 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
struts2 jquery 打造无限层次的树
Oct 23 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
javascript复制对象使用说明
Jun 28 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
layui数据表格 table.render 报错的解决方法
Sep 29 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
PHPlet在Windows下的安装
2006/10/09 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
Angular2使用vscode断点调试ts文件的方法
2017/12/13 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
vue中锚点的三种方法
2018/07/06 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
python追加元素到列表的方法
2015/07/28 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
Django框架实现分页显示内容的方法详解
2019/05/10 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python标准库os库的函数介绍
2020/02/12 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
Love, Bonito国际官网:新加坡女装品牌
2021/03/13 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
《再别康桥》教学反思
2014/02/12 职场文书
教师党员自我评价2015
2015/03/04 职场文书
故意杀人案辩护词
2015/05/21 职场文书
2016年五一促销广告语
2016/01/28 职场文书
MySQL中一条update语句是如何执行的
2022/03/16 MySQL