vue.js怎么改变按钮自身的颜色

要改变按钮自身的颜色，可以通过使用Vue.js中的绑定class和style来实现。

1. 绑定class

在按钮上使用v-bind:class指令，然后动态传入一个类名字符串，这个类名字符串可以通过计算属性或者直接在data中定义。例如：

<template>
  <button v-bind:class="btnColor">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      isPrimary: true,
    };
  },
  computed: {
    btnColor() {
      return this.isPrimary ? 'primary' : 'secondary';
    },
  },
};
</script>

<style>
.primary {
  background-color: blue;
  color: white;
}
.secondary {
  background-color: gray;
  color: black;
}
</style>

2. 绑定style

在按钮上使用v-bind:style指令，然后动态传入一个样式对象。例如：

<template>
  <button v-bind:style="{ backgroundColor: btnColor }">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      isPrimary: true,
    };
  },
  computed: {
    btnColor() {
      return this.isPrimary ? 'blue' : 'gray';
    },
  },
};
</script>

<style>
</style>

以上两种方法都可以实现改变按钮自身颜色的效果，具体使用哪种方法可以根据实际情况进行选择。