<div class="main-kline-cycle"> <el-button type="info" :class="{ active: activeButton === '1m' }" @click="handleButtonClick('1m')">1m</el-button> <el-button type="info" :class="{ active: activeButton === '5m' }" @click="handleButtonClick('5m')">5m</el-button> <el-button type="info" :class="{ active: activeButton === '30m' }" @click="handleButtonClick('30m')">30m</el-button> <el-button type="info" :class="{ active: activeButton === '1h' }" @click="handleButtonClick('1h')">1h</el-button> <el-button type="info" :class="{ active: activeButton === '4h' }" @click="handleButtonClick('4h')">4h</el-button> <el-button type="info" :class="{ active: activeButton === '1d' }" @click="handleButtonClick('1d')">1d</el-button> <el-button type="info" :class="{ active: activeButton === '1w' }" @click="handleButtonClick('1w')">1w</el-button> </div> 这段代码中 怎么控制按钮高亮的?

在这段代码中，按钮的高亮通过 `:class` 绑定和 `activeButton` 数据来控制。具体步骤如下：

1. 在 Vue 组件的 `data` 中定义一个 `activeButton` 属性，用于跟踪当前高亮的按钮：

export default {
  data() {
    return {
      activeButton: '1m' // 初始化为默认高亮的按钮值
    }
  },
  // ...
}

2. 在模板中使用 `:class` 绑定来设置按钮的样式，并使用条件判断 `activeButton === '按钮值'` 来决定是否添加 `active` 类：

<template>
  <div class="main-kline-cycle">
    <el-button type="info" :class="{ active: activeButton === '1m' }" @click="handleButtonClick('1m')">1m</el-button>
    <el-button type="info" :class="{ active: activeButton === '5m' }" @click="handleButtonClick('5m')">5m</el-button>
    <el-button type="info" :class="{ active: activeButton === '30m' }" @click="handleButtonClick('30m')">30m</el-button>
    <el-button type="info" :class="{ active: activeButton === '1h' }" @click="handleButtonClick('1h')">1h</el-button>
    <el-button type="info" :class="{ active: activeButton === '4h' }" @click="handleButtonClick('4h')">4h</el-button>
    <el-button type="info" :class="{ active: activeButton === '1d' }" @click="handleButtonClick('1d')">1d</el-button>
    <el-button type="info" :class="{ active: activeButton === '1w' }" @click="handleButtonClick('1w')">1w</el-button>
  </div>
</template>

3. 在方法中定义 `handleButtonClick`，用于更新 `activeButton` 的值：

export default {
  // ...
  methods: {
    handleButtonClick(buttonValue) {
      this.activeButton = buttonValue;
    }
  }
}

这样，当按钮被点击时，`activeButton` 的值会更新，从而改变按钮的高亮状态。你可以根据实际需求修改样式和按钮的值。