在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 相关文章推荐
js left,right,mid函数
Jun 10 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
javascript进阶篇深拷贝实现的四种方式
Jul 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
vue3.0中使用postcss-pxtorem的具体方法
2019/11/20 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[03:48]大碗DOTA
2019/07/25 DOTA
Python如何实现守护进程的方法示例
2017/02/08 Python
Python实现的用户登录系统功能示例
2018/02/05 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python 使用re.search()筛选后 选取部分结果的方法
2018/11/28 Python
用pycharm开发django项目示例代码
2019/06/13 Python
使用python实现名片管理系统
2020/06/18 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
怎样自定义一个异常类
2016/09/27 面试题
公司业务主管岗位职责
2013/12/07 职场文书
园林施工员岗位职责
2013/12/11 职场文书
运动会开幕式主持词
2014/03/28 职场文书
文明村镇申报材料
2014/05/06 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python