在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 相关文章推荐
ASP SQL防注入的方法
Dec 25 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
原生js实现随机点名功能
Nov 05 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 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学习之数组值的操作
2011/04/17 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
javascript常见操作汇总
2014/09/03 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
python 用lambda函数替换for循环的方法
2018/06/09 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python selenium 获取接口数据的实现
2020/12/07 Python
HTML5打开手机扫码功能及优缺点
2017/11/27 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
教师研修随笔感言
2014/01/23 职场文书
考察邀请函范文
2015/01/31 职场文书
罗马假日观后感
2015/06/08 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
dubbo服务整合zipkin详解
2021/07/26 Java/Android
python 实现图片特效处理
2022/04/03 Python