如何在Vue.js 3中使动态生成的按钮不执行相同的功能

<template>
  <div>
    <button v-for="item in buttons" :key="item.id" @click="handleClick(item.id)">
      {{ item.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        { id: 1, label: '按钮1' },
        { id: 2, label: '按钮2' },
        { id: 3, label: '按钮3' },
      ],
    };
  },
  methods: {
    handleClick(id) {
      // 根据按钮的标识符执行不同的功能
      if (id === 1) {
        // 执行按钮1的功能
        console.log('按钮1被点击');
      } else if (id === 2) {
        // 执行按钮2的功能
        console.log('按钮2被点击');
      } else if (id === 3) {
        // 执行按钮3的功能
        console.log('按钮3被点击');
      }
    },
  },
};
</script>