vuejs绑定class和style样式写四个按钮详细代码

下面是一个示例代码，其中使用了`v-bind`指令绑定了class和style样式，并使用了`v-for`指令循环渲染四个按钮：

<template>
  <div>
    <button v-for="(button, index) in buttons" :key="index" :class="button.class" :style="button.style">{{ button.text }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttons: [
        {
          text: "Button 1",
          class: "btn",
          style: {
            backgroundColor: "red",
            color: "white"
          }
        },
        {
          text: "Button 2",
          class: "btn",
          style: {
            backgroundColor: "blue",
            color: "white"
          }
        },
        {
          text: "Button 3",
          class: "btn",
          style: {
            backgroundColor: "green",
            color: "white"
          }
        },
        {
          text: "Button 4",
          class: "btn",
          style: {
            backgroundColor: "orange",
            color: "white"
          }
        }
      ]
    };
  }
};
</script>

在`data`中定义了一个数组`buttons`，其中每个元素都是一个包含`text`、`class`和`style`属性的对象。在模板中使用`v-for`指令循环渲染四个按钮，并使用`v-bind`指令绑定了按钮的`class`和`style`样式。