vue 循环4个el-button，默认选中第一个按钮，当选择其他按钮时，当前选中按钮高亮

好的，这个问题需要用到 Vue 的数据绑定和条件渲染。

首先，我们可以在 data 中定义一个变量 `selectedButtonIndex` 来表示当前选中的按钮的索引，默认值为 0，也就是第一个按钮。然后，我们在模板中使用 v-for 来循环渲染四个 el-button，同时根据 `selectedButtonIndex` 的值来设置当前选中按钮的样式。

代码如下：

<template>
  <div>
    <el-button
      v-for="(button, index) in buttons"
      :key="index"
      :class="{ 'is-active': selectedButtonIndex === index }"
      @click="selectedButtonIndex = index"
    >
      {{ button }}
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: ['Button 1', 'Button 2', 'Button 3', 'Button 4'],
      selectedButtonIndex: 0,
    };
  },
};
</script>

<style>
.is-active {
  background-color: #409eff;
  color: #fff;
}
</style>

在上面的代码中，我们使用了 Vue 的数据绑定和条件渲染来实现了题目中的需求。当用户点击不同的按钮时，`selectedButtonIndex` 的值会相应地改变，从而触发样式的变化。同时，我们使用了 CSS 来设置选中按钮的样式，使其高亮显示。