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

以下是一个使用Vue实现的案例，点击按钮时改变按钮的背景颜色和图片的颜色，再次点击还原原来的颜色：

HTML部分：

<div id="app">
  <button :class="{active: isActive}" @click="toggleActive">
    <img :src="imgSrc" :class="{active: isActive}">
  </button>
</div>

CSS部分：

button {
  background-color: gray;
  border: none;
  outline: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
}

button.active {
  background-color: yellow;
}

img {
  width: 50px;
  height: 50px;
  filter: grayscale(100%);
}

img.active {
  filter: grayscale(0%);
}

Vue部分：

new Vue({
  el: "#app",
  data: {
    isActive: false,
    imgSrc: "https://via.placeholder.com/50"
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
});

在这个案例中，我们使用了一个`isActive`布尔值来表示按钮和图片的激活状态。我们使用`@click`指令来触发`toggleActive`方法，该方法会切换`isActive`的值。在模板中，我们使用`:class`绑定来根据`isActive`的值动态添加和删除`active`类，从而改变按钮和图片的样式。同时，我们使用`:src`绑定来动态设置图片的`src`属性。