VUE中操作dom元素的几种方法(最新推荐)

在 Vue 中操作 DOM 元素有很多种方法，包括传统的方式和现代的 Vue 方式。本文将介绍一些最新推荐的方法。

1. Vue 自带指令

Vue自带的指令能够在模板中通过简单的语法实现 DOM 操作，支持的指令包括：v-show、v-if、v-else、v-for、v-bind、v-model、v-on、等等。

下面以 v-show 为例，演示一下如何使用 Vue 自带指令来操作 DOM 元素：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <div v-show="show">Hello, Vue!</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
  },
};
</script>

在上面的代码中，我们使用 v-show 指令将 div 元素的显示和隐藏与 show 变量相关联，并且在 toggle 方法中改变 show 变量的值，其它指令的使用方法与 v-show 类似。

2. $refs 属性

在 Vue 中，我们可以通过 $refs 属性来访问 DOM 元素。例如，我们需要获取一个 input 元素的值，可以使用如下代码：

<template>
  <div>
    <input type="text" ref="input" />
    <button @click="getValue">Get value</button>
  </div>
</template>

<script>
export default {
  methods: {
    getValue() {
      console.log(this.$refs.input.value);
    },
  },
};
</script>

在上面的代码中，我们通过 ref 属性给 input 元素取了一个名称 "input"，然后在 getValue 方法中通过 this.$refs.input 获取到该元素，从而访问其 value 属性，实现了对 DOM 元素的操作。

3. Directive Hook

Vue 中还有一种操作 DOM 的方式是使用 Directive Hook，在自定义指令中实现，具体实现如下：

<template>
  <div v-my-directive="color">Test Directive</div>
</template>

<script>
export default {
  directives: {
    "my-directive": {
      bind(el, binding) {
        el.style.color = binding.value;
      },
    },
  },
  data() {
    return {
      color: "red",
    };
  },
};
</script>

在上面的代码中，我们创建了一个叫做 my-directive 的自定义指令，并通过 v-my-directive 将其绑定到 div 元素上。当指令被绑定到该元素上时，通过 bind 钩子函数设置其颜色属性。

通过 Directive Hook 可以灵活地控制 DOM 元素的属性和行为，是一个非常强大的工具。

综上所述，Vue中操作DOM元素的几种方法有：

1. Vue 自带指令；
2. $refs 属性；
3. Directive Hook。

大家可以根据实际场景和需要来选择适合自己的操作方式。