VUE获取DOM节点的方法
vue获取DOM节点在vue项目中,获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。<template><div class="contaier" ref="box" style="width: 100px;height: 100px;">这里用来测试元素的ref属性</div><but
·
vue获取DOM节点
在vue项目中,获取dom节点可以用ref属性,这个属性就是来获取dom对象的。 这个属性就相当于给这个标签起了一个类似于id的东西。
<template>
<div class="contaier" ref="box" style="width: 100px;height: 100px;">
这里用来测试元素的ref属性
</div>
<button type="button" @click="showData()">点击</button>
</template>
<script>
export default {
methods: {
showData() {
console.log(this.$refs.box);
console.log(this.$refs.box.style);
}
}
}
</script>
显示的结果为:
<div class="container" style="height: 100px; width: 100px;"></div>
说明:这里获取的是元素本身- 这里获取到了元素的style属性的值
综上:我们在vue中需要操作某一个元素的时候,可以在元素上添加ref属性,使用$refs来获取到该元素,进而进行一些列操作。
更多推荐
已为社区贡献1条内容
所有评论(0)