Vue $el 对象

示例

使用$el对象改变背景颜色<div>根级别上的标记。

methods: {
  changeColor() {
    this.$el.style.backgroundColor = 'lightgreen';
  }
}

运行示例 »

请参阅下面的更多示例。

定义和用法

这个$elobject 表示 Vue 组件的根 DOM 节点。

这个$el在安装 Vue 应用程序之前，对象不存在。

如果只有一个HTML 根元素位于<template>:

这个$elobject 将是该根元素。
可以直接使用 DOM 进行操作$el对象（参见上面的示例），但不建议这样做。
最好使用Vueref属性和其他 Vue 功能以声明方式更改 DOM，因为它会使代码更加一致且更易于维护（请参见下面的示例 1）。

如果有多个HTML 根元素位于<template>:

这个$elobject 只是 Vue 内部使用的占位符 DOM 文本节点（而不是实际的 DOM 元素）。
DOM不能被操纵使用$el当有多个根元素时，对象（参见下面的示例 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>，这$elobject 只是根元素的第一个元素的文本节点表示（不是实际的 DOM 元素），由 Vue 内部使用。

我们不能用$el对象就是这样的情况。

<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 $el 对象

示例

定义和用法

更多示例

示例1

示例2

示例3

相关页面