Open
Description
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
/**
* Implement the custom directive
* Make sure the list item text color changes to red when the `toggleTab` is toggled
*
*/
const VActiveStyle = {
mounted(el, binding: { value: any }) {
const [styles = {}, flag] = binding.value;
watchEffect(() => {
Object.keys(styles).forEach((key) => {
el.style[key] = flag() ? styles[key] : '';
});
});
},
};
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>