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>

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