Javascript 如何使用函数更改Vue组件按钮的颜色？

如何使用函数更改Vue组件按钮的颜色？正在使用引导vue。在下面的代码中，使用函数更改工具提示，如何将相同的想法应用于按钮？任何帮助都将不胜感激

以下是Vue组件：

<template>
  <div class="text-center">
    <b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary" @click="userHandler(username)">
      <div v-bind:class="{ active: checkbox1 }">
        {{ username }}
      </div>
    </b-button>  
  </div>
</template>

<script>

import EventBus from '../eventBus.js'
export default {

    props: ['username', 'checkbox1'],

    data() {
      return {
         show: true,
         tooltipTextContent: 'block',
     }      
},

methods: {


    userHandler(username) {

        EventBus.$emit('handleUser', username);  
    },


     tooltipText() {
          if (!this.checkbox1) {
            return this.tooltipTextContent
          } else {
            return `un${this.tooltipTextContent}`
          }
    }
},
} 

</script>
<style scoped>

.active {
    color: red;
}
</style>

使用对象语法 如果您想根据checkbox1道具更改按钮的颜色，可以执行以下操作：

<b-button 
   v-b-tooltip.hover.right="tooltipText" 
   :variant="{ 'outline-primary': checkbox1, 'outline-secondary': !checkbox1 }" 
   @click="userHandler(username)">

然后创建一个名为getVariant的计算属性，如：

---

是否有一种方法可以使用函数来更改按钮颜色，例如使用toolltip执行的操作？是的，我们还可以绑定到返回对象的计算属性。这是一种常见且强大的模式。我已经更新了代码。是否可以使用方法中的常规函数更改按钮颜色？是的，您可以这样做。只需将computed prop改为methods，并像variant=getVariant那样调用它

<b-button 
   v-b-tooltip.hover.right="tooltipText" 
   :variant="getVariant" 
   @click="userHandler(username)">

computed: {
  getVariant: function () {
    return {
      'outline-primary': this.checkbox1,
      'outline-secondary': !this.checkbox1
    }
  }
}