在Vue js中更改按钮文本和颜色

<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  data() {
    return {
      buttonText: '点击按钮'
    };
  },
  methods: {
    changeButtonText() {
      this.buttonText = '按钮被点击';
    }
  }
}
</script>

<template>
  <button :class="buttonColor">按钮</button>
</template>

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

<style>
.red {
  background-color: red;
}

.blue {
  background-color: blue;
}
</style>