如何在Vuejs中单击时突出显示表行？

<template>
  <table>
    <tr v-for="(item, index) in items" :key="index" @click="highlightRow(index)" :class="{ highlighted: selectedIndex === index }">
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </table>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const items = ref([
      { name: 'Item 1', value: 100 },
      { name: 'Item 2', value: 200 },
      { name: 'Item 3', value: 300 }
    ]);
    const selectedIndex = ref(null);

    function highlightRow(index) {
      selectedIndex.value = index;
    }

    return { items, selectedIndex, highlightRow };
  }
};
</script>

<style>
.highlighted {
  background-color: yellow;
}
</style>