vue3怎么用for循环遍历每个按钮并给每个按钮加上点击事件。

1.v-for循环要遍历的按钮

   <div v-for="item in items" :key="item.label || 'divider-' + item.type">

      <el-button

        class="OnlineMode-btn"

        v-if="item.label"

        :icon="item.icon"

        >{{ item.label }}</el-button

      >

      <div v-else class="vertical-divider"></div>

    </div>

2.添加数组进行遍历

// tag数据

const items = ref([

  { type: "info", label: "1", icon: Plus },

  { type: "info", label: "2", icon: Histogram },

  { type: "info", label: "3", icon: Histogram },

  { type: "info", label: "3", icon: Histogram },

  { type: "info", label: "4", icon: Histogram },

  { type: "info", label: "5, icon: Histogram },

  { type: "info", label: "" },

  { type: "info", label: "6", icon: Histogram },

]);

3.给按钮绑定点击事件

<el-button

        class="OnlineMode-btn"

        v-if="item.label"

        :icon="item.icon"

        @click="handleButtonClick(item)"

        >{{ item.label }}</el-button

      >

      <div v-else class="vertical-divider"></div>

      这个就是点击事件的写法  @click="handleButtonClick(item)"

4.给点击事件做处理通过属性lable来进行判断，我用的是switch，也可以用if 

// 处理按钮点击

function handleButtonClick(item) {

  console.log(`Clicked button with label: ${item.label}`);

  switch (item.label) {

    case "新健/调用":

      newCallClick();

      break;

    case "图表设置":

      chartSettingsClick();

      break;

    case "矩形缩放":

      rectangularZoomClick();

      break;

    case "水平缩放":

      horizontalZoomClick();

      break;

    case "等比缩放":

      proportionalZoomClick();

      break;

    case "可视化类型":

      visualizationTypeClick();

      break;

    default:

      break;

  }

}

记住一定要加上（item）进行形参。

5.给需要的按钮添加function方法进行进行事件处理

function newCallClick() {

  alert("处理 新健/调用 的特殊逻辑");

  // 特殊逻辑

}

function chartSettingsClick() {

  console.log("处理 图表设置 的特殊逻辑");

  alert("处理 图表设置 的特殊逻辑");

  // 特殊逻辑

}

function rectangularZoomClick() {

  console.log("处理 矩形缩放 的特殊逻辑");

  alert("处理 矩形缩放 的特殊逻辑");

  // 特殊逻辑

}

function horizontalZoomClick() {

  alert("处理 水平缩放 的特殊逻辑");

  console.log("处理 水平缩放 的特殊逻辑");

  // 特殊逻辑

}

function proportionalZoomClick() {

  alert("处理 等比缩放 的特殊逻辑");

  console.log("处理 等比缩放 的特殊逻辑");

  // 特殊逻辑

}

function visualizationTypeClick() {

  alert("处理 可视化类型 的特殊逻辑");

  console.log("处理 可视化类型 的特殊逻辑");

  // 特殊逻辑

}