在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中获取事件对象的方法小结
Mar 13 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
node.js 和HTML5开发本地桌面应用程序
Dec 13 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Node.js操作系统OS模块用法分析
Jan 04 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
Feb 11 Javascript
js实现滑动滑块验证登录
Jul 24 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
php5.3 注意事项说明
2013/07/01 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP+iframe模拟Ajax上传文件功能示例
2019/07/02 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Windows和Linux动态库应用异同
2016/04/17 面试题
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
金鑫耀Java笔试题
2014/09/06 面试题
实用求职信范文分享
2013/12/25 职场文书
安全生产管理责任书
2014/04/16 职场文书
消防志愿者活动方案
2014/08/23 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
学籍证明模板
2014/11/21 职场文书
2014年电话销售工作总结
2014/12/01 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
机器人总动员观后感
2015/06/09 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis