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

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

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

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

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

<template>
  <div>
    <p v-for="(style, index) in styles" :key="index" :class="style.className">{{ 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: '默认样式', className: 'text1' },
        { name: '红色字体', className: 'text2' },
        { name: '大号字体', className: 'text3' },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    setActive(index) {
      this.activeIndex = index;
    },
  },
  computed: {
    activeStyle() {
      return this.styles[this.activeIndex];
    },
  },
};
</script>

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

.text1 {
  color: black;
}

.text2 {
  color: red;
}

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

在上述代码中，我们使用了 `v-for` 指令来遍历 `styles` 数组，生成对应的 `<p>` 元素和按钮。我们为每个 `<p>` 元素绑定了对应的类名，这些类名由 `styles` 数组中的对象的 `className` 属性决定。我们为这些类名分别定义了不同的样式，例如 `text1` 对应黑色字体，`text2` 对应红色字体，`text3` 对应更大的字号。在需要时，我们通过修改 `activeIndex` 的值来切换不同的样式，从而实现不同的样式效果。我们为每个按钮绑定 `@click` 事件，并在对应的方法中修改 `activeIndex` 的值，从而实现样式的切换。最后，我们使用了一个计算属性 `activeStyle`，根据 `activeIndex` 的值返回当前应该使用的样式对象，以便在模板中动态绑定类名。