Java OpenResty Spring Spring Boot MySQL Redis MongoDB PostgreSQL Linux Android Nginx 面试 小程序 Arthas JVM AQS juc Kubernetes Docker DevOps


Vue $refs 操作 DOM 元素

Vue 大约 638 字

$refs

每个Vue组件实例上都包含一个$refs对象,对象中存储着对应的DOM元素或组件的引用。

默认情况下,$refs指向一个空对象。

ref

在元素中添加ref属性,并指定属性值,就会向$refs中注册(添加)这个元素。

ref可以添加在普通标签元素,也可以添加在组件上。

<template>
  <div>
    <p ref="myP">文字</p>
    <MyComponent ref="myComponent"></MyComponent>

    <button @click="showThis">按钮</button>
  </div>
</template>

操作元素

通过this.$refs.refName操作元素。

export default {
  methods: {
    showThis() {
      console.log(this)
      console.log(this.$refs.myP)
      console.log(this.$refs.myP.textContent)
      this.$refs.myP.style.color = 'red';
      this.$refs.myComponent.changeValue();
    }
  }
}
阅读 113 · 发布于 2022-12-23

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb

扫描下方二维码关注公众号和小程序↓↓↓

扫描二维码关注我
昵称:
随便看看 换一批