vue获取dom元素注意事项


Posted in Javascript onDecember 28, 2017
mounted(){
    setTimeout(()=>{
     this.contentToggle();
    },1000)
  },

methods:{
   contentToggle(){
    console.log(this.$refs.bodyFont.offsetHeight);
   }
  }

vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个

this.$nextTick(()=>{
   
    //函数
})

来获取,发现根本没用啊/。。

所以好的办法就是用一个setTimeout定时器,时间可以设为0,但是有时候生效,有时候不生效,还是加一个小的时间值比较保险,这样就可以保证获取到的一定是dom加载后的了,该原理适用于vue中很多传值的问题,刚开始获取不到传过来的值,用一个setTimeout就可。

ps:VUE获取DOM元素内容

通过ref来获取dom元素

在vue官网上对ref的解释

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例

当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组 

比如我现在要实现的效果是点击用v-for生成的li ,获取到该元素的值

首先要获取当前点击的li元素,我们要做的是

1.给dom添加点击事件和ref属性

<li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem">
  <router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
</li>

2.然后在点击事件方法中使用ref

setPageMenu(index) {
//这个是获取当前menuItem值,用index来区分当前元素是v-for 产生的数组中的第几个数
  let getMenuText = this.$refs.menuItem[index].innerText;
}

总结

以上所述是小编给大家介绍的vue获取dom元素注意事项,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
js canvas实现擦除动画
Jul 16 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
Vue刷新修改页面中数据的方法
Sep 16 Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 #Javascript
webpack搭建vue 项目的步骤
Dec 27 #Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 #Javascript
js判断节假日实例代码
Dec 27 #Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
Dec 27 #Javascript
Angular实现的简单查询天气预报功能示例
Dec 27 #Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 #Javascript
You might like
PHP 在5.1.* 和5.2.*之间 PDO数据库操作中的不同之处小结
2012/03/07 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
解密ThinkPHP3.1.2版本之模块和操作映射
2014/06/19 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
angular.js实现购物车功能
2017/10/23 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
Vue 幸运大转盘实现思路详解
2019/05/06 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
对Python3 序列解包详解
2019/02/16 Python
python ---lambda匿名函数介绍
2019/03/13 Python
浅谈tensorflow之内存暴涨问题
2020/02/05 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
super()与this()的区别
2016/01/17 面试题
销售工作岗位职责
2013/12/24 职场文书
房产买卖委托公证书
2014/04/04 职场文书
《埃及的金字塔》教学反思
2014/04/07 职场文书
婚礼父母答谢词
2015/01/04 职场文书
爱晚亭导游词
2015/02/09 职场文书
长征观后感
2015/06/09 职场文书
烛光里的微笑观后感
2015/06/17 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js