24 - 激活的样式-指令

[fan975326]

<script setup lang="ts">
import { ref, watch } from 'vue';

/**
 * 实现该指令 :
 * 当切换该选项卡时，列表项文本颜色变为红色
 *
 */
const VActiveStyle = (el: HTMLLIElement, props: any) => {
  const [attr, func] = props.value;
  el.style.color = func() ? attr.color : '';
  watch(activeTab, () => {
    el.style.color = func() ? attr.color : '';
  });
};

const list = [1, 2, 3, 4, 5, 6, 7, 8];
const activeTab = ref(0);
function toggleTab(index: number) {
  activeTab.value = index;
}
</script>

<template>
  <ul>
    <li
      v-for="(item, index) in list"
      :key="index"
      v-active-style="[{ color: 'red' }, () => activeTab === index]"
      @click="toggleTab(index)"
    >
      {{ item }}
    </li>
  </ul>
</template>