在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中两个感叹号的作用说明
Dec 28 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
iframe与主框架跨域相互访问实现方法
Sep 14 Javascript
Angular中支持SCSS的方法
Nov 18 Javascript
webpack+vue中使用别名路径引用静态图片地址
Nov 20 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
解决vuecli3中img src 的引入问题
Aug 04 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 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
深入PHP异步执行的详解
2013/06/03 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
2015/03/04 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
2019/08/01 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
使用tensorflow实现线性svm
2018/09/07 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
小区门卫管理制度
2014/01/29 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
庆六一宣传标语
2014/10/08 职场文书
安全员岗位职责范本
2015/04/11 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
讨论nginx location 顺序问题
2022/05/30 Servers