在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 相关文章推荐
JavaScript基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
js实现适配不同的屏幕大小
Apr 10 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
Jul 27 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
如何在 Vue 表单中处理图片
Jan 26 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
使用PHP模拟HTTP认证
2006/10/09 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
超简单JS二级、多级联动的简单实例
2014/02/18 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
2017/04/13 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
js模块加载方式浅析
2017/08/12 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
Python开发编码规范
2006/09/08 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
Python wordcloud库安装方法总结
2020/12/31 Python
团队精神演讲稿
2013/12/31 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
学校评语大全
2014/05/06 职场文书
2015年助残日活动总结
2015/03/27 职场文书
电力工程合作意向书
2015/05/11 职场文书
幼儿园保教工作总结2015
2015/10/15 职场文书
六年级作文之预言作文
2019/10/25 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
Oracle用户管理及赋权
2022/04/24 Oracle