vue for 循环两个按钮 点击切换 两个按钮不同的字体颜色字体大小

好的，针对您的问题，可以参考如下思路：

1. 在 Vue 中，我们可以使用 `v-for` 指令来遍历数组，生成对应的元素。

2. 对于按钮的点击事件，我们可以使用 `@click` 来监听，并在对应的方法中修改响应式数据，从而实现样式的切换。

综上，我们可以编写如下代码来实现点击按钮切换不同的字体颜色和字体大小：

<template>
  <div>
    <p :class="textClass">{{ text }}</p>
    <div>
      <button v-for="(style, index) in styles" :key="index" @click="setActive(index)">{{ style.name }}</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello, World!',
      styles: [
        { name: '默认样式', color: 'black', size: '16px' },
        { name: '红色字体', color: 'red', size: '16px' },
        { name: '大号字体', color: 'black', size: '24px' },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    setActive(index) {
      this.activeIndex = index;
    },
  },
  computed: {
    activeStyle() {
      return this.styles[this.activeIndex];
    },
    textClass() {
      return {
        'text1': this.activeIndex === 0,
        'text2': this.activeIndex === 1,
        'text3': this.activeIndex === 2,
      };
    },
  },
};
</script>

<style>
p {
  font-size: 16px;
}

.text1 {
  color: black;
}

.text2 {
  color: red;
}

.text3 {
  font-size: 24px;
}
</style>

在上述代码中，我们使用了 `v-for` 指令来遍历 `styles` 数组，生成对应的按钮。我们为每个按钮绑定 `@click` 事件，并在对应的方法中修改 `activeIndex` 的值，从而实现样式的切换。我们为 `<p>` 元素绑定了动态的类名，这些类名由 `textClass` 计算属性根据 `activeIndex` 的值决定。我们为这些类名分别定义了不同的样式，例如 `text1` 对应黑色字体，`text2` 对应红色字体，`text3` 对应更大的字号。在需要时，我们通过修改 `activeIndex` 的值来切换不同的样式，从而实现不同的样式效果。我们将 `styles` 数组中的对象改为了包含 `name`、`color` 和 `size` 三个属性，分别表示样式的名称、字体颜色和字体大小。在模板中，我们使用了动态绑定的 `:style` 指令来设置字体颜色和字体大小，这些值由 `activeStyle` 计算属性根据 `activeIndex` 的值决定。