在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与有限状态机详解
May 08 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
详解vue2.0模拟后台json数据
May 16 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 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之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php中计算时间差的几种方法
2009/12/31 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
详解在Angular4中使用ng2-baidu-map的方法
2019/06/19 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
给Python入门者的一些编程建议
2015/06/15 Python
Python实现批量修改文件名实例
2015/07/08 Python
解析Python中while true的使用
2015/10/13 Python
python数据封装json格式数据
2018/03/04 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python 调用钉钉机器人的方法
2019/02/20 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
自我鉴定范文
2013/11/10 职场文书
博士生入学考试推荐信
2013/11/17 职场文书
创业计划书的主要内容有哪些
2014/01/29 职场文书
美容院考勤制度
2014/01/30 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
爱护公共设施标语
2014/06/24 职场文书
学生安全责任书模板
2014/07/25 职场文书
安全员岗位职责
2015/02/10 职场文书
初中数学教学随笔
2015/08/15 职场文书