vue3点击事件修改dom样式

在 Vue 3 中，你可以使用 `@click` 指令来绑定点击事件，并且使用 `ref` 来获取 DOM 元素并修改其样式。

首先，在模板中使用 `ref` 来获取需要修改样式的 DOM 元素，例如：

<template>
  <div>
    <button @click="changeStyle">点击修改样式</button>
    <div ref="myDiv">这是需要修改样式的元素</div>
  </div>
</template>

然后，在 Vue 实例中定义 `changeStyle` 方法来修改样式，例如：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myDiv = ref(null)

    const changeStyle = () => {
      myDiv.value.style.color = 'red'
      myDiv.value.style.fontSize = '24px'
    }

    return {
      myDiv,
      changeStyle
    }
  }
}
</script>

在 `changeStyle` 方法中，我们可以通过 `myDiv.value` 来获取 DOM 元素，并修改其样式，例如将文本颜色改为红色，字体大小改为 24px。

最后，在模板中通过 `v-bind` 来绑定 `myDiv`，例如：

<div ref="myDiv" v-bind:style="{ color: textColor, fontSize: fontSize }">这是需要修改样式的元素</div>

在这里我们使用了 `v-bind` 来将 `textColor` 和 `fontSize` 绑定到 `style` 上，这样我们可以通过修改这两个变量来动态修改样式。