vue 获取dom子元素_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属性

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

setPageMenu(index) {

//这个是获取当前menuItem值，用index来区分当前元素是v-for 产生的数组中的第几个数

let getMenuText = this.$refs.menuItem[index].innerText;

}

总结

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

vue 获取dom子元素_vue获取dom元素注意事项相关推荐

vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
vue获取input焦点事件_vue获取input焦点，弹框后自动获取input焦点
Document 点开弹框1 点开弹框2 取消确定取消确定 var app = new Vue({ el: '#app', data() { return { id: 'ssssss', ...
vue 获取当前元素的父元素_vue获取dom元素内容
通过ref来获取dom元素在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
vue 给取data值_vue获取data值的方式分析
上一篇文章我们简单讲解了data初始化的两种方式,这次我们分析一下获取data内值的方式获取vue的data 我们常用获取data值的方式为如下两种: this.$data.link this.li ...
vue获取微信登陆权限_Vue获取微信JSSDK授权,以及微信分享
场景 Vue获取JSSDK授权以便在微信浏览器,或者嵌在小程序里面做些小事情,如朋友/朋友圈分享,微信支付,图片上传下载等步骤一配置安全域名: 在微信公众平台对应的公众号设置里面配上相应的JS接口 ...
vue获取当前月最后一天_vue获取当前月最后一天_3月最后一天说说 4月第一天早安朋友圈心情说说文案...
今天是2020年三月,最后的一天.就算日子很难,也要和三月好好说再见,人生永远有告别,但我们永远有期待.无论风雨凄迷,或是阳光明媚:无论命运多舛,或是道路坎坷.微笑始终藏于心中,在灿烂的阳光下,让我们 ...
vue 获取当前div离边框距离_vue获取dom元素的宽高
// 元素上加上ref 在mounted写因为我是html标签可以不用加 el(如果是html标签就不用加) this.$refs.tooltipRef.offsetWidth this.$refs ...
获取不到html页面上的元素,Vue v-for渲染页面，获取不到DOM元素解析
v-for 渲染循环渲染页面的出现让我们告别了繁琐的JS拼接,在开发上面节省了很多时间. 近期在开发中发现了在某些特定情况下,出现了获取不到渲染出来的DOM元素的情况,原因身为小白的我暂时还没搞清楚( ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...

vue 获取dom子元素_vue获取dom元素注意事项

vue 获取dom子元素_vue获取dom元素注意事项相关推荐

最新文章

热门文章