vue2和vue3表格左侧单选框代码区别

Vue2和Vue3在表格左侧单选框的代码实现上有一些区别。下面是它们的主要区别：

Vue2中的实现方式：
1. 首先，在data中定义一个变量selectedRow，用于保存选中的行数据。
2. 在表格的模板中，使用v-model指令将选中的行数据与selectedRow进行双向绑定。
3. 在表格的每一行中，使用一个单选框来表示选择状态，并将其绑定到当前行的数据上。
4. 当用户点击单选框时，通过触发一个方法来更新selectedRow的值。

示例代码如下：

<template>
  <table>
    <tr v-for="item in tableData" :key="item.id">
      <td>
        <input type="radio" v-model="selectedRow" :value="item">
      </td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Alice', age: 20 },
        { id: 2, name: 'Bob', age: 25 },
        { id: 3, name: 'Charlie', age: 30 }
      ],
      selectedRow: null
    };
  }
};
</script>

Vue3中的实现方式：
1. 在Vue3中，可以使用新的Composition API来实现表格左侧单选框。
2. 首先，在setup函数中定义一个ref变量selectedRow，用于保存选中的行数据。
3. 在表格的模板中，使用v-model指令将选中的行数据与selectedRow进行双向绑定。
4. 在表格的每一行中，使用一个单选框来表示选择状态，并将其绑定到当前行的数据上。
5. 当用户点击单选框时，通过触发一个方法来更新selectedRow的值。

示例代码如下：

<template>
  <table>
    <tr v-for="item in tableData" :key="item.id">
      <td>
        <input type="radio" v-model="selectedRow" :value="item">
      </td>
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
    </tr>
  </table>
</template>

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

export default {
  setup() {
    const tableData = [
      { id: 1, name: 'Alice', age: 20 },
      { id: 2, name: 'Bob', age: 25 },
      { id: 3, name: 'Charlie', age: 30 }
    ];
    const selectedRow = ref(null);

    return {
      tableData,
      selectedRow
    };
  }
};
</script>