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>

运行示例 »