vue获取dom元素注意事项
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元素注意事项，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
本文向大家介绍VUE中v-on:click事件中获取当前dom元素的代码，包括了VUE中v-on:click事件中获取当前dom元素的代码的使用技巧和注意事项，需要的朋友参考一下 在开发中总是忘记，特意在此记录 关键字： $event PS：下面看下v-on:click获取当前事件对象元素 dom元素这样写: vue实例中的methods的写法: 总结 以上所述是小编给大家介绍的VUE中v-o
-
我希望能够获取<template #loadMore>中 id为"is_load"的div元素 但是ref无法引用到 ,在onMounted函数中使用nextTick回调打印处理这个dom也是空的，等待渲染后也不行 有什么方法可以操作到dom vue 无法获取到template中的dom元素?
-
问题内容： 我很难理解如何在PHP中使用DOMElement对象。我找到了这段代码，但是我不确定它是否适用于我： 基本上，我需要在DOM中搜索特定的，之后需要提取一个非标准的（即我用JS编写并使用的非标准的），以便可以看到它的价值。原因是我需要从中获取一份，而在HTML中则需要基于重定向。如果有人可以解释一下我如何为此目的使用DOMDocument，那将有所帮助。我真的很难理解发生了什么以及如何正
-
我使用Thymeleaf创建html组件。组件在单独的文件中声明： 中基本按钮的声明 这个想法是为组件提供某种类型的工具集。使用此组件的代码将是： 它运行良好，但我考虑了按钮需要具有以下属性的情况：或或任何其他属性。问题来了： 如何将属性传递给按钮？ 一种方法是将其作为片段的参数传递，但它太丑了。 有什么方法可以获取片段中占位符的属性吗？（见下面的示例） 我想这样调用片段： 并且在片段中想要获取这
-
问题内容： 我正在使用PHPDOM，并且试图在DOM节点中获取具有给定类名的元素。获得该子元素的最佳方法是什么？ 更新： 我最终使用了PHP，它更容易使用。 问题答案： 更新：CSS选择器的Xpath版本 因此，在下面我回应hakre的评论之后，我感到好奇，并调查了后面的代码。看起来上面的选择器已编译为以下xpath（未经测试）： 所以PHP将是： 基本上，我们在这里所做的就是规范化属性，以便即使
-
问题内容： 我得到了此功能来获取cssPath： 但是我有这样的事情： 但是完全正确的是，它看起来应该像这样： 有人有任何想法简单地用javascript实现吗？ 问题答案： 为了始终获得正确的元素，您将需要使用或来选择不能唯一标识元素的选择器。所以试试这个： 你可以添加一个例行检查在其对应的背景下独特的元素（如，，，等）。