vue 点击元素 设置 样式

可以使用v-bind或v-on指令结合对象或数组语法来动态绑定样式。例如，可以使用v-bind绑定一个样式对象，如下所示：

<template>
   <div :style="myStyle" @click="changeStyle"></div>
</template>

<script>
export default {
   data() {
      return {
         myStyle: {
            backgroundColor: 'red',
            color: 'white'
         }
      }
   },
   methods: {
      changeStyle() {
         this.myStyle.backgroundColor = 'blue';
      }
   }
}
</script>

在这个例子中，我们使用v-bind指令绑定一个动态的样式对象myStyle。当我们单击元素时，事件处理程序方法changeStyle会将myStyle对象的backgroundColor属性更改为蓝色。该元素的样式会相应地更新。

或者，您可以通过使用类绑定来更改元素的样式。您可以绑定一个包含类的数组，如下所示：

<template>
   <div :class="myClasses" @click="toggleClass"></div>
</template>

<script>
export default {
   data() {
      return {
         myClasses: ['bg-red', 'text-white']
      }
   },
   methods: {
      toggleClass() {
         this.myClasses.push('bg-blue');
      }
   }
}
</script>

<style>
.bg-red {
   background-color: red;
}
.text-white {
   color: white;
}
.bg-blue {
   background-color: blue;
}
</style>

在这个例子中，我们使用:class指令动态绑定一个类数组myClasses。当我们单击元素时，事件处理程序方法toggleClass会将一个新类'bg-blue'添加到myClasses数组中。该元素的样式会相应地更新。同时，我们需要在对应的样式表中定义bg-blue类的样式。

希望以上内容对您有所帮助！