通过ref来获取DOM节点

2023-04-15 17:43| 来源: 网络整理| 查看: 265

通过ref来获取DOM节点转载

mb5fe94b83e4685 2020-03-03 17:13:00

文章标签 ide 数组赋值数据 ajax 文章分类 Java 后端开发

hello world 我是按钮 export default { name: 'Home', data () { return { arr: '' } }, methods: { handleClick () { this.arr = this.$refs.hello.innerHTML //获取DOM元素节点的值 alert(this.arr) } } }

vue $refs的基本用法添加 new Vue({ el: "#app", methods:{ add:function(){ this.$refs.input1.value ="22"; //this.$refs.input1 减少获取dom节点的消耗 } } })

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

refs的坑

该数据来源先是发送ajax请求获取数据再渲染dom在mounted中调用

// console.log(this.$refs.sliderGroup.children) this.children = this.$refs.sliderGroup.children

今天在调试的时候，发现console.log(this.$refs.sliderGroup.children)能取到该dom集合但在

this.children = this.$refs.sliderGroup.children 赋值的时候， this.children始终取不到一开始，以为是类数组对象的问题然后各种类数组转数组的方法，尝试失败，一度怀疑人生 console.log的坑虽然能打印出来，但是dom并没有渲染完毕解决 mounted() { // setTimeout(() => { // this._setSliderWidth() // this._initDots() // this._initSlider() // if (this.autoPlay) { // this._play() // } // }, 20) let length = this.$refs.sliderGroup.children.length const fecthChil = () => { window.setTimeout(() => { length = this.$refs.sliderGroup.children.length // console.log('.....', length) if (length 赞收藏评论分享举报

上一篇：ERRORinit datasource error, url: jdbc:mysql://localhost:3306/xxxxxx?useUnicode=true&characterEncoding=gbk&serverTimezone=GMT&useSSL=false

下一篇：methods和mounted的区别

【本文地址】

公司简介

联系我们