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 注意事项与常用语法小结
Jun 07 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
Aug 22 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
jQuery多条件筛选如何实现
Nov 04 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 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
杏林同学录(三)
2006/10/09 PHP
PHP sprintf()函数用例解析
2011/05/18 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php对象和数组相互转换的方法
2015/05/12 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
THINKPHP5.1 Config的配置与获取详解
2020/06/08 PHP
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
购物车前端开发(jQuery和bootstrap3)
2016/08/27 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
Vue使用自定义指令实现拖拽行为实例分析
2020/06/06 Javascript
Python实现excel转sqlite的方法
2017/07/17 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Opencv常见图像格式Data Type及代码实例
2020/11/02 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
final, finally, finalize的区别
2012/03/01 面试题
幼儿园家长会欢迎词
2014/01/09 职场文书
抽样调查项目计划书
2014/04/24 职场文书
学习雷锋标语
2014/06/25 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
母亲去世追悼词
2015/06/23 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
如何在Python中妥善使用进度条详解
2022/04/05 Python