vue点击按钮让按钮和按钮里面的图标变成黄色，不点击按钮和按钮里的图标是灰色，只使用一个图标，写个案例

下面是一个Vue.js案例，其中通过绑定class属性，实现点击按钮让按钮和按钮里面的图标变成黄色，不点击按钮和按钮里的图标是灰色。

<template>
  <div>
    <button :class="{active: isActive}" @click="toggleActive">
      <i :class="{active: isActive}" class="fa fa-star"></i>
      Click me!
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px;
  background-color: #ccc;
  border: none;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
}

button.active {
  background-color: yellow;
}

i.active {
  color: yellow;
}
</style>

在这个案例中，使用了Font Awesome库提供的星形图标，并在点击按钮时通过toggleActive方法切换isActive的值，从而动态改变按钮和图标的样式。利用:class指令绑定isActive的值，实现了在按钮和图标的class中动态切换active类名，实现了样式的动态变化。最后，在样式中设置了.active类的样式，使得在isActive为true时，按钮和图标的颜色变为黄色。