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 相关文章推荐
javascript 构造函数强制调用经验总结
Dec 02 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
javascript创建createXmlHttpRequest对象示例代码
Feb 10 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
JS中多层次排序算法的实现代码
Jan 06 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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
php设置编码格式的方法
2013/03/05 PHP
php微信开发自定义菜单
2016/08/27 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
Angular Module声明和获取重载实例代码
2016/09/14 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
js注册时输入合法性验证方法
2017/10/21 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python3搜索及替换文件中文本的方法
2015/05/22 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
解释一下钝化(Swap out)
2016/12/26 面试题
优秀共产党员先进事迹
2014/01/27 职场文书
品牌宣传方案
2014/03/21 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
倡议书格式模板
2014/05/13 职场文书
社区植树节活动总结
2015/02/06 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
Django显示可视化图表的实践
2021/05/10 Python
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫