vue3中 script step 写法 点击div元素后 改变div的class

可以使用Vue3中的模板引用和响应式数据来实现：

1. 在template中给div元素添加一个ref属性，用来引用该元素：

<template>
  <div ref="myDiv" :class="divClass" @click="changeClass">点击我</div>
</template>

2. 在script中定义响应式数据和方法：

<script>
import { ref } from 'vue'

export default {
  setup() {
    const divClass = ref('class1')

    function changeClass() {
      divClass.value = 'class2'
    }

    return {
      divClass,
      changeClass
    }
  }
}
</script>

3. 在changeClass方法中改变divClass的值，从而改变div元素的class属性。

4. 在div元素的:class属性中绑定divClass变量，这样当divClass的值改变时，div元素的class属性也会随之改变。

5. 在div元素的@click属性中绑定changeClass方法，这样当点击div元素时，会触发changeClass方法，从而改变div元素的class属性。

完整的代码如下：

<template>
  <div ref="myDiv" :class="divClass" @click="changeClass">点击我</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const divClass = ref('class1')

    function changeClass() {
      divClass.value = 'class2'
    }

    return {
      divClass,
      changeClass
    }
  }
}
</script>

当点击div元素时，会改变div元素的class属性，从而实现改变div元素的样式。