📅  最后修改于: 2023-12-03 15:09:50.774000             🧑  作者: Mango
在 Vue.js 的开发中,经常需要针对某些元素存在于数组中来添加活动类,以方便开发人员进行样式控制和状态管理。本文将介绍在 TypeScript 中如何实现该功能。
首先,我们需要声明一个数组,用于存储被确定为活动状态的元素:
activeItems: number[] = [];
接着,我们可以写一个方法来判断某个元素是否已经被确定为活动状态:
isActive(index: number) {
return this.activeItems.includes(index);
}
接下来,我们可以在模板中使用这个方法,来动态绑定 CSS 类:
<div
v-for="(item, index) in items"
:class="{ active: isActive(index) }"
>
{{ item }}
</div>
最后,我们可以编写一个方法,用于在点击元素时将其加入或从活动数组中取出:
toggleActive(index) {
if (!this.activeItems.includes(index)) {
this.activeItems.push(index);
} else {
this.activeItems.splice(this.activeItems.indexOf(index), 1);
}
}
在模板中,我们需要绑定 click
事件,并调用上述方法:
<div
v-for="(item, index) in items"
:class="{ active: isActive(index) }"
@click="toggleActive(index)"
>
{{ item }}
</div>
以上就是在 Vue.js 中针对元素存在于数组时添加活动类的基本实现。同时,我们使用 TypeScript 来提升类型安全和开发效率。
<template>
<div>
<div
v-for="(item, index) in items"
:class="{ active: isActive(index) }"
@click="toggleActive(index)"
>
{{ item }}
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component
export default class App extends Vue {
items: string[] = ["Item 1", "Item 2", "Item 3", "Item 4"];
activeItems: number[] = [];
isActive(index: number) {
return this.activeItems.includes(index);
}
toggleActive(index: number) {
if (!this.activeItems.includes(index)) {
this.activeItems.push(index);
} else {
this.activeItems.splice(this.activeItems.indexOf(index), 1);
}
}
}
</script>
<style>
.active {
font-weight: bold;
}
</style>