在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代码
Aug 09 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
JS中创建函数的三种方式及区别
Mar 13 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
Vue 去除路径中的#号
Apr 19 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
在Vue中实现随hash改变响应菜单高亮
Mar 09 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
详解Vue的七种传值方式
Feb 08 Vue.js
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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
深入理解JavaScript系列(4) 立即调用的函数表达式
2012/01/15 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Python文件及目录操作实例详解
2015/06/04 Python
Django中利用filter与simple_tag为前端自定义函数的实现方法
2017/06/15 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Python使用win32 COM实现Excel的写入与保存功能示例
2018/05/03 Python
Django项目中用JS实现加载子页面并传值的方法
2018/05/28 Python
对Python 两大环境管理神器 pyenv 和 virtualenv详解
2018/12/31 Python
python实现淘宝秒杀脚本
2020/06/23 Python
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
优秀医生事迹材料
2014/02/12 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
导游词之山东孔庙
2019/11/04 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL