Skip to content

Latest commit

 

History

History
44 lines (32 loc) · 2.86 KB

README.zh-CN.md

File metadata and controls

44 lines (32 loc) · 2.86 KB

激活的样式-指令 困难 #Directives

By webfansplz @webfansplz

接受挑战    English

在这个挑战中,我们将实现一个"激活的样式"指令,让我们开始吧 👇:

<script setup lang='ts'>

import { ref } from "vue"

/**
 * 实现该指令 :
 * 当切换该选项卡时,列表项文本颜色变为红色
 * 
*/
const VActiveStyle = {

}

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>

返回首页 分享你的解答 查看解答