vue操作dom元素的3种方法示例

讲解“vue操作dom元素的3种方法示例”的完整攻略，共包括以下5个部分：

vue操作dom元素的3种方法介绍
通过ref获取dom元素
使用$el访问dom元素
使用$refs访问dom元素
示例说明

1. vue操作dom元素的3种方法介绍

Vue.js是一个MVVM框架，它采用数据驱动视图的方式来渲染页面。而在实际开发中，难免会遇到需要操作DOM元素的情况。

在Vue.js中，我们可以使用以下3种方法来操作DOM元素：

通过ref获取dom元素
使用$el访问dom元素
使用$refs访问dom元素

下面我将详细讲解这3种方法的使用。

2. 通过ref获取dom元素

使用ref属性可以为元素或组件注册一个唯一标识符，然后在父组件中可以通过$refs对象访问到这个元素或组件。

在Vue.js中，我们可以通过ref属性来获取一个dom元素，并在Vue实例中进行操作。

如下所示，我们在template中为一个div元素添加了一个ref属性，并将其值设置为"myDiv"：

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

之后我们可以在Vue实例中访问该元素，并对其进行操作：

export default {
  mounted () {
    this.$refs.myDiv.style.backgroundColor = 'red'
    this.$refs.myDiv.innerHTML = 'Hello World!'
  }
}

在上述代码中，我们利用Vue的生命周期函数之一——mounted()，在组件加载完成后，通过this.$refs对象获取到对应的元素，随后对该元素进行了背景颜色和文本的改变操作。

3. 使用$el访问dom元素

Vue实例在创建后，会存在一个$el属性，该属性指向了Vue实例所挂载的DOM元素。我们可以直接使用这个属性来对元素进行操作。

export default {
  mounted () {
    this.$el.style.backgroundColor = 'red'
    this.$el.innerHTML = 'Hello World!'
  }
}

在上述代码中，我们同样使用了Vue的生命周期函数之一——mounted()，在组件加载完成后，直接通过this.$el对象获取到对应的元素，随后对该元素进行了背景颜色和文本的改变操作。

需要注意的是，使用$el访问元素时只能在Vue实例已经被挂载到页面上后才有效，因为此时$el才指向对应的DOM元素。

4. 使用$refs访问dom元素

与2中的方法类似，Vue实例也可以通过$refs来访问dom元素。

与通过ref属性直接获取元素的方式不同的是，使用$refs获取到的是Vue组件实例，并且该实例下的$data属性可以直接访问到组件的数据。

下面我们演示一个例子

<template>
  <div>
    <p>{{message}}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world!"
    }
  },
  mounted() {
    console.log(this.$refs.myBtn)
  },
  methods: {
    updateMessage() {
      this.message = "Vue.js is an awesome Javascript Framework!"
      this.$refs.myBtn.style.backgroundColor = 'red'
    }
  }
}
</script>

在上述代码中，我们为button元素添加了一个ref属性，值为"myBtn"。在mounted生命周期函数中，我们通过this.$refs.myBtn来获取到该button元素。

在updateMessage函数中，我们通过this.$refs.myBtn来获取到该button元素，并改变了该元素的背景颜色。

5. 示例说明

通过以上3种方法，我们可以非常方便地对dom元素进行操作，下面再来看2个简单的示例。

示例1

在template中添加了一个按钮，并为该按钮添加了一个ref属性，值为"myBtn"。在click事件中，通过this.$refs.myBtn来获取到该按钮，并把文本改为"Hello World!"。

<template>
  <div>
    <button ref="myBtn" @click="changeText">Click me!</button>
  </div>
</template>

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

示例2

在template中添加了一个文本框，并为该文本框添加了一个ref属性，值为"myInput"。在mounted()生命周期中，通过this.$refs.myInput来获取到该文本框，并设置其默认值为"Hello World!"。

<template>
  <div>
    <input ref="myInput" type="text" />
  </div>
</template>

<script>
export default {
  mounted () {
    this.$refs.myInput.value = 'Hello World!'
  }
}
</script>

以上就是我对于Vue操作DOM元素的3种方法的详解，希望能够对您有帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue操作dom元素的3种方法示例 - Python技术站