如何在Vuetify组件中以编程方式设置组件属性

<template>
  <v-btn v-bind:color="buttonColor">Button</v-btn>
</template>

<script>
export default {
  data() {
    return {
      buttonColor: 'primary'
    }
  }
}
</script>

<template>
  <v-btn v-bind:color="buttonColor">Button</v-btn>
</template>

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

<template>
  <v-btn v-bind:color="getButtonColor()">Button</v-btn>
</template>

<script>
export default {
  data() {
    return {
      buttonColor: 'primary'
    }
  },
  methods: {
    getButtonColor() {
      return this.buttonColor;
    },
    changeButtonColor() {
      this.buttonColor = 'secondary';
    }
  }
}
</script>