21 - 函数式组件

[nsnans]

// 你的答案

<script setup lang='ts'> import { h, ref } from "vue" /** * Implement a functional component : * 1. Render the list elements (ul/li) with the list data * 2. Change the list item text color to red when clicked. */ const ListComponent = (p, { emit }) => { return h( 'ul', {}, p.list.map((x, i) => { return h('li', { style: { color: (p['active-index'] == i) ? 'red' : null }, onClick: () => { emit('toggle', i) } }, x.name) }) ) } const list = [{ name: "John", }, { name: "Doe", }, { name: "Smith", }] const activeIndex = ref(0) function toggle(index: number) { activeIndex.value = index } </script>