Vue 图片点击按钮高亮显示，其他变灰 - 完整代码示例

可以使用 Vue 的 computed 属性和样式绑定来实现图片点击按钮高亮显示、其他变灰的效果。

首先，需要在 data 中定义一个变量来保存当前被选中的图片的 index：

data() {
  return {
    currentIndex: -1,
    // 其他图片的数据...
  }
}

然后，在模板中对每个图片绑定一个点击事件，当点击图片时，将当前图片的 index 赋值给 currentIndex：

<div v-for="(item, index) in images" :key="index" @click="currentIndex = index">
  <img :src="item.src" :class="{ active: currentIndex === index }">
</div>

这里，使用 :class 来动态绑定图片的 class，当 currentIndex 等于当前图片的 index 时，添加一个名为 active 的 class，用于高亮显示。

最后，使用 computed 属性来计算其他图片的样式，根据 currentIndex 的值来判断是否为当前选中的图片，如果不是，则添加一个名为 grey 的 class，用于变灰显示：

computed: {
  otherImageStyle() {
    return (index) => {
      return {
        'filter': this.currentIndex === index ? 'none' : 'grayscale(100%)'
      }
    }
  }
}

这里，使用箭头函数来返回一个函数，该函数接受一个图片的 index 参数，返回一个样式对象，根据 currentIndex 的值来判断是否为当前选中的图片，如果是，则不添加任何样式，否则添加一个名为 grey 的 class，用于变灰显示。

最后，在模板中使用 v-bind 来绑定其他图片的样式：

<div v-for="(item, index) in images" :key="index" @click="currentIndex = index">
  <img :src="item.src" :class="{ active: currentIndex === index }" :style="otherImageStyle(index)">
</div>

这样，当点击某个图片时，该图片会高亮显示，其他图片会变灰显示。