Vue $el 对象
示例
使用 $el 对象更改根级别 <div> 标签的背景颜色。
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
请参见下面的更多示例。
定义和用法
$el 对象表示 Vue 组件的根 DOM 节点。
$el 对象在 Vue 应用程序挂载之前不存在。
**如果 <template> 中只有一个** HTML 根元素
- 则
$el对象将是该根元素。 - 可以使用
$el对象直接操作 DOM（参见上面的示例），但不推荐。 - 最好使用 Vue
ref属性和其他 Vue 功能以声明式方式更改 DOM，因为它会产生更一致且更易于维护的代码（参见下面的示例 1）。
**如果 <template> 中有多个** HTML 根元素
- 则
$el对象将只是一个占位符 DOM 文本节点，Vue 在内部使用（而不是实际的 DOM 元素）。 - 当有多个根元素时，**无法** 使用
$el对象操作 DOM（参见下面的示例 2）。
**注意：** 在 Vue 3 的 Composition API 中，$el 属性在 <script setup> 中不可访问（使用 setup 函数）。
更多示例
示例 1
使用 ref 属性以声明式方式更改 <div> 标签的背景颜色，而不是使用 $el 对象。
<template>
<div ref="rootDiv">
<h2>Example $el Object</h2>
<p>It is recommended, and more consistent, to use the ref attribute instead of the $el object to change the background color root DIV tag.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>
<script>
export default {
methods: {
changeColor() {
this.$refs.rootDiv.style.backgroundColor = 'lightgreen';
}
}
}
</script>
示例 2
在 <template> 根部有多个元素的情况下，$el 对象将只是一个文本节点表示形式（而不是实际的 DOM 元素），用于 Vue 内部，表示根元素的第一个元素。
在这种情况下，我们无法使用 $el 对象操作 DOM。
<template>
<div>
<h2>Example $el Object</h2>
<p>We are not able to use the $el object to change the background color of the root DIV tag when there are other tags on the root level. Open browser console to see the error generated.</p>
<button v-on:click="changeColor">Click here</button>
</div>
<p>With this extra p-tag there are two tags on the root level.</p>
</template>
<script>
export default {
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
}
</script>
<style>
#app > div, #app > p {
border: solid black 1px;
padding: 10px;
}
</style>
示例 3
使用 $el 对象更改 <h2> 子元素的背景颜色。
<template>
<div>
<h2>Example $el Object</h2>
<p>Using the $el object to change the background color of the H2 child element.</p>
<button v-on:click="changeColor">Click here</button>
</div>
</template>
<script>
export default {
methods: {
changeColor() {
this.$el.children[0].style.backgroundColor = 'lightblue';
}
}
}
</script>
相关页面
Vue 教程：Vue 模板引用
Vue 教程：Vue 方法
Vue 参考：Vue 'ref' 属性
Vue 参考：Vue $refs 对象
