在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 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
JavaScript中的this机制
Jan 30 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
详解springmvc 接收json对象的两种方式
Dec 06 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
OpenLayers3实现测量功能
Sep 25 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
一拳超人中怪人协会钦定! S级别最强四人!
2020/03/02 日漫
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php调用c接口无错版介绍
2014/03/11 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
基于jquery的无刷新分页技术
2011/06/11 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python深度优先算法生成迷宫
2018/01/22 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python实现连连看游戏
2020/02/14 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
前台接待的工作职责
2013/11/21 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
大学新生入学教育方案
2014/05/16 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技