vue ts方法里有event,怎么给ev添加.is-select类
时间: 2024-03-28 11:41:58 浏览: 59
vue.js-div滚动条隐藏但有滚动效果的实现方法
在Vue TypeScript方法中,可以通过事件对象(event)来获取触发事件的元素,并使用类绑定来添加或删除类。
首先,需要在Vue组件中引入Vue的类型声明文件:
```
import Vue from 'vue';
export default Vue.extend({
methods: {
changeStyle(event: MouseEvent) {
const target = event.target as HTMLElement; // 将事件目标转换为HTMLElement类型
target.classList.toggle('is-select'); // 使用classList添加或删除类
}
}
});
```
在这个例子中,我们使用了MouseEvent类型来声明事件对象(event),并将其传递给changeStyle方法。在方法中,我们将事件目标(event.target)转换为HTMLElement类型,以便使用classList属性来添加或删除类。使用toggle方法来切换是否添加类名 "is-select"。
然后,在HTML模板中绑定点击事件:
```
<template>
<button @click="changeStyle">Change Style</button>
</template>
```
当点击按钮时,会触发changeStyle方法,并且按钮会添加或删除类名 "is-select",从而改变其样式。
阅读全文