,可以通过以下步骤实现:
- 使用CSS设置非活动缩略图的样式:
- 在CSS中,可以使用
filter
属性来改变图像的颜色,将其转换为灰色。可以使用grayscale
函数将图像转换为灰度图像。 - 例如,可以使用以下CSS代码将非活动缩略图转换为灰色:
- 例如,可以使用以下CSS代码将非活动缩略图转换为灰色:
- 在Vue中应用CSS样式:
- 在Vue组件中,可以通过为非活动缩略图的元素添加一个类名来应用CSS样式。
- 例如,可以在Vue组件的模板中使用以下代码来应用CSS样式:
- 例如,可以在Vue组件的模板中使用以下代码来应用CSS样式:
- 在Vue组件中设置活动状态:
- 在Vue组件的数据中,可以定义一个
isActive
属性来表示缩略图的活动状态。 - 例如,可以在Vue组件的数据中添加以下代码:
- 例如,可以在Vue组件的数据中添加以下代码:
- 根据需要更新活动状态:
- 在Vue组件的方法中,可以根据需要更新
isActive
属性的值,以控制缩略图的活动状态。 - 例如,可以在Vue组件的方法中添加以下代码来更新活动状态:
- 例如,可以在Vue组件的方法中添加以下代码来更新活动状态:
通过以上步骤,可以在CSS和Vue中将非活动缩略图显示为灰色。当isActive
属性为false
时,应用CSS样式将缩略图转换为灰色。当isActive
属性为true
时,缩略图将显示原始颜色。