vue中 点击div元素后 改变div的class

可以使用Vue的绑定class的方式来改变div的class。

首先，在data中定义一个变量来表示div的class：

data() {
  return {
    divClass: 'original-class'
  }
}

然后，在模板中绑定div的class：

<div :class="divClass" @click="changeClass"></div>

注意，这里使用了Vue的动态绑定class的语法，即:class，而不是普通的class。这样可以根据divClass的值来动态地改变div的class。

最后，在methods中定义changeClass函数来改变divClass的值：

methods: {
  changeClass() {
    this.divClass = 'new-class'
  }
}

这样，当点击div元素时，div的class就会从原来的original-class变成new-class。

相关问题

vue中 点击div元素后 改变div背景色

可以通过绑定一个点击事件，在事件处理函数中通过修改元素的样式来改变背景色。

例如：

<template>
  <div class="my-div" @click="changeColor"></div>
</template>

<script>
export default {
  methods: {
    changeColor() {
      const div = document.querySelector('.my-div')
      div.style.backgroundColor = 'red'
    }
  }
}
</script>

<style>
.my-div {
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>

这样点击 `my-div` 元素后，就会将背景色改为红色。当然，也可以将背景色作为一个 data 中的属性，通过修改这个属性来实现背景色的变化。

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元素的样式。