如何在Vue3中使用Ref访问DOM元素详解

import { ref } from 'vue';

const myElement = ref(null);

<template>
  <div ref="myElement">
    Hello, Vue!
  </div>
</template>

import { onMounted } from 'vue';

onMounted(() => {
  console.log(myElement.value); // 打印 <div>Hello, Vue!</div>
  myElement.value.style.color = 'red'; // 将文字颜色设置为红色
});

<template>
  <div>
    <h1>Vue 3 使用 ref 访问 DOM 元素示例</h1>
    <div ref="myElement">Hello, Vue!</div>
    <button @click="changeColor">改变颜色</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'App',
  setup() {
    // 创建一个 ref 对象
    const myElement = ref(null);
    
    // 在 mounted 生命周期钩子中访问 DOM 元素
    onMounted(() => {
      console.log(myElement.value);  // 打印 <div>Hello, Vue!</div>
    });

    // 一个将颜色设置为蓝色的函数
    const changeColor = () => {
      if (myElement.value) {
        myElement.value.style.color = 'blue';
      }
    };

    // 返回 ref 和方法以便在模板中使用
    return {
      myElement,
      changeColor
    }
  }
}
</script>

<style>
/* 一些基本样式 */
h1 {
  font-family: Arial, sans-serif;
  color: #333;
}

div {
  margin-bottom: 10px;
}
</style>

<template>
  <div>
    <div ref="element1">Element 1</div>
    <div ref="element2">Element 2</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'MultipleRefExample',
  setup() {
    const element1 = ref(null);
    const element2 = ref(null);

    onMounted(() => {
      console.log(element1.value);  // 打印 <div>Element 1</div>
      console.log(element2.value);  // 打印 <div>Element 2</div>
    });

    return {
      element1,
      element2
    }
  }
}
</script>

import { ref } from 'vue';

export default {
  name: 'ReactiveRefExample',
  setup() {
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    }
  }
}