vuefor循环四个按钮并动态绑定，默认选中第一个，并挂载

可以使用Vue.js的v-for指令来循环渲染四个按钮，并使用v-bind指令动态绑定按钮的class属性来实现默认选中第一个按钮的效果。具体的实现步骤如下：

1. 在Vue组件的data属性中定义一个名为selected的变量，用来记录当前选中的按钮的索引，初始值为0（第一个按钮）。

2. 在Vue组件的template模板中使用v-for指令循环渲染四个按钮，并使用v-bind指令动态绑定按钮的class属性。代码如下：

<template>
  <div>
    <button v-for="(btn, index) in buttons" :key="index" :class="{ active: index === selected }">{{ btn }}</button>
  </div>
</template>

3. 在Vue组件的created生命周期钩子中，将selected变量挂载到Vue实例上。代码如下：

<script>
export default {
  data() {
    return {
      selected: 0, // 默认选中第一个按钮
      buttons: ['按钮1', '按钮2', '按钮3', '按钮4']
    }
  },
  created() {
    this.$root.selected = this.selected
  }
}
</script>

4. 在CSS样式中定义.active类，用来设置选中按钮的样式。代码如下：

<style>
button.active {
  background-color: #f00;
  color: #fff;
}
</style>

这样就完成了vue循环四个按钮并动态绑定，默认选中第一个，并挂载的实现。