在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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
js单例模式的两种方案
Oct 22 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
javascript中apply和call方法的作用及区别说明
Feb 14 Javascript
js基于myFocus实现轮播图效果
Feb 14 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 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伪静态写法附代码
2008/06/20 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
非常漂亮的JS代码经典广告
2007/10/21 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
div失去焦点事件实现思路
2014/04/22 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
JavaScript的ExtJS框架中表格的编写教程
2016/05/21 Javascript
JS组件Bootstrap Select2使用方法解析
2016/05/30 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
小程序实现列表删除功能
2018/10/30 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
Element InputNumber计数器的使用方法
2020/07/27 Javascript
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
python flask搭建web应用教程
2019/11/19 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
柒牌官方商城:中国男装优秀品牌
2017/06/30 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
2021-4-3课程——SQL Server查询【2】
2021/04/05 SQL Server
python井字棋游戏实现人机对战
2022/04/28 Python