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

以下是一个使用Vue实现的案例，包括一个按钮和一个图片。点击按钮时，按钮和图片将变为黄色。未点击按钮时，按钮和图片将保持灰色。

<template>
  <div>
    <button :class="{ active: isActive }" @click="isActive = !isActive">
      <img :src="imgSrc" :class="{ active: isActive }" alt="Button Image" />
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
      imgSrc: 'https://via.placeholder.com/150'
    };
  }
};
</script>

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

.active {
  background-color: yellow;
}

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

.active img {
  filter: none;
}
</style>

这个案例中，使用了一个按钮和一个图片，按钮和图片都可以被点击。按钮和图片都包含一个`active`类，当它们被点击时，这个类将会被添加到它们的class列表中，从而改变它们的样式。

在`data`选项中，定义了一个名为`isActive`的响应式数据，用来保存按钮和图片的状态。默认情况下，这个状态是`false`，即按钮和图片都是灰色的。当按钮被点击时，`isActive`的值将会被改变，从而改变按钮和图片的样式。

在样式表中，定义了按钮和图片的基本样式。当按钮和图片被激活时，它们的背景色将会变为黄色。图片的灰色效果使用了CSS的`filter`属性。

请注意，这个案例中的图片链接是一个占位符链接，可以替换为任何图片链接。