如何在vue.js中表的特定行的悬停时显示不同的值？

data() {
  return {
    hoverRowIndex: -1, // 默认值为-1，表示没有悬停的行
    tableData: [/* 表格数据 */]
  }
}

<table>
  <tr v-for="(row, index) in tableData" :key="index"
      @mouseover="hoverRowIndex = index"
      @mouseout="hoverRowIndex = -1"
      :class="{ 'hovered': hoverRowIndex === index }">
    <!-- 表格单元格内容 -->
  </tr>
</table>

<table>
  <tr v-for="(row, index) in tableData" :key="index"
      @mouseover="hoverRowIndex = index"
      @mouseout="hoverRowIndex = -1"
      :class="{ 'hovered': hoverRowIndex === index }">
    <td>{{ row.name }}</td>
    <td>{{ row.age }}</td>
    <td v-if="hoverRowIndex === index">{{ row.hoverValue }}</td>
  </tr>
</table>