如何使用CSS和Vue实现图片卡片单选时点击/选中项显示激活蓝色边框

步骤1：新增选中状态变量 #

在Vue组件的data选项中新增变量记录当前选中的卡片唯一标识，推荐用卡片的唯一字段layoutId，也可以用索引：

export default {
  data() {
    return {
      // 其他原有数据保留
      selectedLayoutId: '' // 存储当前选中的布局ID
    }
  },
  methods: {
    getLayoutDetails(obj) {
      // 新增更新选中状态逻辑
      this.selectedLayoutId = obj.layoutId
      // 原有业务逻辑保留
    }
  }
}

如果需要默认选中第一个卡片，可在mounted钩子中初始化：

mounted() {
  if(this.layoutDatas.length) {
    this.selectedLayoutId = this.layoutDatas[0].layoutId
  }
}

步骤2：模板绑定动态类 #

修改列表项的class绑定逻辑，选中时自动追加itemClick激活类：

<div
  v-for="(obj, index) in layoutDatas"
  :key="index"
  :class="['item', { itemClick: selectedLayoutId === obj.layoutId }]"
  @click="getLayoutDetails(obj)"
>
  <!-- 原有内部代码完全不变 -->
</div>

如果没有唯一的layoutId，也可以用索引判断：

• data中定义selectedIndex: -1
• 点击事件传参改为@click="getLayoutDetails(obj, index)"
• 方法中赋值this.selectedIndex = index
• 动态类判断改为{ itemClick: selectedIndex === index }

步骤3：调整CSS优先级 #

原有.itemClick的权重低于.item，会被默认边框覆盖，调整选择器提高优先级：

/* 替换原来的.itemClick样式 */
.item.itemClick {
  border: 1px solid #0071c5;
  /* 如果需要和hover一致的放大效果，可以额外加 transform: scale(1.1); */
}

内容的提问来源于stack exchange，提问作者learningMonk