由于vue不建议使用使用真实dom元素,但是必要的时候,我们可以必须要用,因此,vue为我们提供了ref。我们通过,在组件的html部分。
<template>
<div>
<h1 ref="myHeading">Hello, world!</h1>
</div>
</template>
然后,通过在组件的Js部分,通过$refs中来引用DOM元素。
<script>
export default {
mounted() {
const heading = this.$refs.myHeading;
// 在这里可以对真实的 DOM 元素进行操作
heading.style.color = 'red';
}
};
</script>