vue中根据按钮高亮切换图片

在Vue中，你可以使用v-bind:class指令或者直接操作元素的style属性来根据按钮的状态（如高亮）切换图片。这里是一个基本的例子：

<!-- 使用v-bind:class -->
<template>
  <button v-bind:class="{ active: isHighlighted }">
    <img :src="currentImage" alt="Button Image" />
  </button>
</template>

<script>
export default {
  data() {
    return {
      isHighlighted: false,
      currentImage: 'path/to/default-image.png', // 默认图片路径
      highlightedImage: 'path/to/highlighted-image.png', // 高亮状态图片路径
    };
  },
  methods: {
    toggleHighlight() {
      this.isHighlighted = !this.isHighlighted;
    }
  },
};
</script>

<style scoped>
.active {
  background-color: #ccc; /* 或者你想设置的高亮样式 */
}
</style>

<!-- 按钮点击事件 -->
<button @click="toggleHighlight">点击切换图片</button>