二つの異なるボタンで対象の動的クラスを操作する

<template>
  <div class="hello">
    <button @click="green()">緑のたぬき</button>
    <button @click="red()">赤いきつね</button>
    <p v-bind:class="{ 'is-green': isGreen, 'is-red': isRed }" class="item">
      色が変わるよ
    </p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      isGreen: false,
      isRed: false,
    };
  },
  methods: {
    green() {
      return (this.isRed = false), (this.isGreen = !this.isGreen);
    },
    red() {
      return (this.isGreen = false), (this.isRed = !this.isRed);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  color: #000;
}
.is-green {
  color: #42b983;
}
.is-red {
  color: red;
}
</style>