Vue $el 对象
示例
使用 $el 对象更改根级别上 <div> 标签的背景颜色。
methods: {
changeColor() {
this.$el.style.backgroundColor = 'lightgreen';
}
}
请参阅下面的更多示例。
定义和用法
$el 对象表示 Vue 组件的根 DOM 节点。
在挂载 Vue 应用程序之前，$el 对象不存在。
如果 <template> 中只有一个 HTML 根元素:
$el对象将是该根元素。- 可以使用
$el对象直接操作 DOM（请参见上面的示例），但不建议这样做。 - 最好使用 Vue
ref属性和其他 Vue 功能以声明方式更改 DOM，因为它会使代码更加一致且更易于维护（ 参见下面的示例 1）。
如果 <template> 中有多个 HTML 根元素:
$el对象只是 Vue 内部使用的占位符 DOM 文本节点（而不是实际的 DOM 元素）。- 当存在多个根元素时，无法使用
$el对象操作 DOM（请参见下面的示例 2）。
注意:在 Vue 3 的 Composition API 中，<script setup> 中无法访问 $el 属性（使用 setup 函数）。
更多示例
示例 1
按照建议使用 ref 属性以声明方式更改 <div> 标签的背景颜色，而不是使用 $el 对象。
<template>
<div ref="rootDiv">
<h2>Example $el Object</h2>
<p>建议使用 ref 属性而不是 $el 对象来更改根 DIV 标签的背景颜色，这样更一致。</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>示例 $el 对象</h2>
<p>当根级别上有其他标签时，我们无法使用 $el 对象来更改根 DIV 标签的背景颜色。 打开浏览器控制台查看生成的错误。</p>
<button v-on:click="changeColor">Click here</button>
</div>
<p>通过这个额外的 p 标签，根级别上有两个标签。</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 对象
