写vue2页面两个按钮默认第一个功能点 按钮有高亮的下边框

可以通过以下步骤实现：

1. 在模板中添加两个按钮，并设置它们的样式。

<template>
  <div>
    <button class="button active">按钮1</button>
    <button class="button">按钮2</button>
  </div>
</template>

<style>
.button {
  border: none;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.active {
  border-bottom: 2px solid #333;
}
</style>

2. 使用 `data` 属性来控制活动按钮的状态。

<template>
  <div>
    <button class="button" :class="{ active: activeButton === 1 }" @click="activeButton = 1">按钮1</button>
    <button class="button" :class="{ active: activeButton === 2 }" @click="activeButton = 2">按钮2</button>
  </div>
</template>

<style>
.button {
  border: none;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  padding: 10px;
  margin-right: 10px;
  cursor: pointer;
}
.active {
  border-bottom: 2px solid #333;
}
</style>

<script>
export default {
  data() {
    return {
      activeButton: 1
    };
  }
};
</script>

3. 当点击按钮时，更新 `activeButton` 属性以反映新的活动按钮。

现在，当用户点击按钮时，活动按钮将带有高亮的下边框。