📜  当元素存在到数组 vuejs 中时添加活动类 - TypeScript (1)

📅  最后修改于: 2023-12-03 15:09:50.774000             🧑  作者: Mango

在 Vue.js 中针对元素存在于数组时添加活动类 - TypeScript

在 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>