在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 相关文章推荐
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
JSONP跨域的原理解析及其实现介绍
Mar 22 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
Aug 24 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
Vue中使用的EventBus有生命周期
Jul 12 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
Sep 04 Javascript
微信小程序实现星级评价效果
Dec 28 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
Feb 10 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原生模板引擎 最简单的模板引擎
2012/04/25 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
理解javascript中的闭包
2017/01/11 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
javascript中正则表达式语法详解
2020/08/07 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
环境工程大学生个人的自我评价
2013/10/08 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
大四自我鉴定
2014/02/08 职场文书
公证委托书大全
2014/04/04 职场文书
研究生求职自荐书
2014/06/23 职场文书
2014年加油站工作总结
2014/12/04 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python