vue获取dom元素的方法

可以使用ref属性来获取dom元素，例如：在模板中给元素添加ref属性，然后在Vue实例中通过this.$refs来获取该元素的引用。另外，也可以使用document.getElementById等原生方法来获取dom元素。

相关问题

vue 获取dom元素赋值innerHTML

在 Vue 中获取 DOM 元素可以使用 `ref`，然后通过 `$refs` 属性访问。赋值 `innerHTML` 可以通过 JavaScript 的 `innerHTML` 属性来实现。

示例代码如下：

<template>
  <div>
    <div ref="myDiv"></div>
    <button @click="changeText">Change Text</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeText() {
      this.$refs.myDiv.innerHTML = '<p>Hello, World!</p>';
    }
  }
}
</script>

在上面的代码中，我们通过 `ref` 给 `div` 元素起了一个名字为 `myDiv`。然后在 `changeText` 方法中，通过 `this.$refs.myDiv` 访问这个元素，并将 `innerHTML` 属性赋值为 `<p>Hello, World!</p>`。当我们点击按钮时，`div` 元素中的文本就会被替换为 “Hello, World!”。

vue获取dom元素添加子元素

在 Vue 中获取 DOM 元素的常用方式是使用 `ref` 属性。在模板中，可以给元素添加一个 `ref` 属性，然后在 Vue 实例中通过 `$refs` 属性访问该元素。

例如，可以在模板中添加一个 `div` 元素并给其添加一个 `ref` 属性：

<template>
  <div ref="container"></div>
</template>

然后在 Vue 实例中，可以通过 `$refs` 访问该元素并添加子元素：

export default {
  mounted() {
    const container = this.$refs.container;
    const child = document.createElement('div');
    child.textContent = 'Hello, World!';
    container.appendChild(child);
  }
}

这样就可以在 `container` 元素中添加一个文本内容为 "Hello, World!" 的 `div` 子元素。