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>

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("处理 可视化类型 的特殊逻辑");

// 特殊逻辑

<el-col :span="8" v-for="(item,index) in channelControl.channel" :key="item.id"> <el-card class="box-card"> <p class="inline borderp10... 在本文之前已经有文章简单概要介绍过 vue 中的渲染，点击帮你快速复习👏👏，包括条件渲染和列表渲染。二者同样重要，但是对于项目而言，使用更多的是列表渲染，主要表现为“ 循环 ”。下面让我们继续深入地了解列表渲染的相关内容吧~👏👏👏。 3.9 列表渲染指令 vue 提供了 v-for 指令，用来辅助开发者基于一个数组来 循环 渲染相似的 UI 结构。 v-for 指令需要使用item in items 的特殊语法，其中： items 是待 循环 的数组 item 是当前的 循环 项 3.9.1 v-for 中的索引 v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) 在实际开发中，根据具体的需求和场景选择适合的条件语句方式是很重要的。如果需要在不同的条件之间进行选择，可以使用v-if和v-else指令；如果需要频繁切换显示和隐藏的元素，可以使用v-show指令。