189 8069 5689

vue.js获取dom的方法

这篇文章主要介绍了vue.js获取dom的方法，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

成都创新互联公司始终坚持【策划先行，效果至上】的经营理念，通过多达十载累计超上千家客户的网站建设总结了一套系统有效的营销解决方案，现已广泛运用于各行各业的客户，其中包括：成都地磅秤等企业，备受客户称赞。

vue.js获取dom的方法：1、给html中原始标签对或子组件中定义ref属性，在【mounted(){}】方法后使用【this.$refs】获取DOM元素；2、mounted对组件的内容进行了修改后继续用【this.$refs】。

vue.js获取dom的方法：

  • 给html中原始标签对或子组件中定义ref属性,在mounted(){}方法或者此方法后使用this.$refs.具体的ref值来获取DOM元素。因为使用mounted以前的钩子函数时,还未将组件挂载到DOM上，自然也无法通过$refs获取DOM上的元素;

  • 需要区分的是,打印this.$refs.具体的ref值, 若是原始标签对则输出的结果是原始标签对，若ref属性在子组件标签中，则输出的是组件对象,而不是组件对应template中的内容;

  • this.$refs 输出的是当前组件中包含的定义了ref属性的标签或子组件的集合;

  • 在组件渲染过程中，如mounted期间对组件的内容进行了修改后继续用this.$refs.被修改组件对应的ref,这个时候获取的是修改之前的DOM元素,为了获取修改之后的DOM元素,必须使用this.$nextTick()方法,并在该方法的回调函数中使用this.$refs,此时便是获取到修改之后的DOM元素。当然要获取修改之后的DOM元素可以在updated函数下,但是在某些具体的场景下需要在mounted中获取修改后的DOM元素;





Vue组件中获取DOM元素的方式之$refs的使用
Vue.component('Btn',{ template:` ` }) let App = { data:function() { return { isShow:false } }, template:`
`, //对应输出结果为下面第一张图 // mounted:function() { // console.log(this.$refs) // console.log(this.$refs.input1) // console.log(this.$refs.input2) // console.log(this.$refs.btn1) // } mounted:function() { // 修改ref=input2的v-show值，让其显示, 接着获取该DOM并让其获得焦点,但是没法获得焦点，这是因为mounted内无法获得更新DOM后的DOM元素，这个时候需要调用this.$nextTick方法，在其回掉函数中重新执行代码this.$refs.input2.focus() this.isShow = true // this.$refs.input2.focus() this.$nextTick(function() { this.$refs.input2.focus() }) }, } let  vm = new Vue({ el:'#app', data:function() { return { } }, components:{ App }, template:` ` })

对应已注释mounted中的内容

vue.js获取dom的方法

mounted中对this.$nextTick的使用使得mounted中可以获得已更新的DOM元素。在本代码中让已更新的DOM元素获得焦点

vue.js获取dom的方法

感谢你能够认真阅读完这篇文章，希望小编分享vue.js获取dom的方法内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!


分享名称：vue.js获取dom的方法
本文网址：http://jkwzsj.com/article/jgdjis.html

其他资讯