怎么给以下代码的按钮加上高亮显示，默认第一个是高亮，<el-button v-for="data in list1" :key="data.id" type="text" class="custom-button" @click="getDetail(data.id)">{{ data.name }}</el-button>

你可以使用Vue.js的`class`绑定来实现按钮的高亮显示。首先，你需要在data中定义一个变量来记录当前高亮的按钮的索引值，例如`highlightIndex`。然后，你可以在`v-for`循环中使用`:class`绑定来根据当前索引值判断是否应该添加高亮样式。

以下是修改后的代码示例：

<el-button v-for="(data, index) in list1" :key="data.id" type="text" class="custom-button"
           :class="{ 'highlight': index === highlightIndex }"
           @click="getDetail(data.id)">{{ data.name }}</el-button>

接下来，在Vue实例的`data`中定义`highlightIndex`变量，并将其初始值设为0，表示默认第一个按钮高亮：

data() {
  return {
    highlightIndex: 0,
    // 其他 data 属性...
  }
},

最后，你可以在`getDetail`方法中更新`highlightIndex`的值，以实现点击按钮时切换高亮效果：

methods: {
  getDetail(id) {
    // 处理点击事件的逻辑...

    // 更新 highlightIndex 的值为当前按钮的索引
    this.highlightIndex = this.list1.findIndex(data => data.id === id);
  },
  // 其他方法...
}

在CSS中，你可以定义一个名为`.highlight`的样式类，以指定高亮的样式：

.highlight {
  background-color: yellow;
  /* 其他高亮样式 */
}

这样，按钮的高亮显示效果就实现了。第一个按钮会默认高亮，点击其他按钮时，会切换高亮效果。