在Vue中调用onPrimaryPicSelected函数时如何给label标签添加CSS样式？

完全可以实现，推荐使用Vue原生的响应式状态绑定逻辑完成，不需要手动操作DOM，具体操作步骤如下： #

步骤1：新增响应式状态 #

首先在组件的data选项中新增一个标识图片是否已选择的状态变量：

data() {
  return {
    // 原有其他变量保留
    primaryPhoto: null,
    primaryPhotoUrl: '',
    isPrimaryPicSelected: false // 新增的状态变量
  }
}

步骤2：给label标签绑定动态样式 #

修改模板中的label标签，用Vue的:class语法绑定你需要的额外样式，示例中我们新增一个上传成功后的样式类uploaded-label：

<label 
  id="img1" 
  class='flex flex-col border-4 border-dashed w-40 h-32 hover:bg-gray-100 hover:border-purple-300 group'
  :class="isPrimaryPicSelected ? 'uploaded-label' : ''"
>
<!-- 内部原有代码保持不变 -->
</label>

之后你可以在样式区自定义uploaded-label的具体样式，比如：

.uploaded-label {
  border-color: #10b981; /* 绿色边框表示已上传 */
  background-color: #f0fdf4;
}

如果不需要单独写样式类，也可以直接用内联动态样式：

<label 
  id="img1" 
  class='flex flex-col border-4 border-dashed w-40 h-32 hover:bg-gray-100 hover:border-purple-300 group'
  :style="isPrimaryPicSelected ? {borderColor: '#10b981', backgroundColor: '#f0fdf4'} : {}"
>

步骤3：在选择图片的回调中修改状态 #

修改onPrimaryPicSelected函数，选择完成后把状态设为true即可触发样式更新：

onPrimaryPicSelected(event) {
  this.primaryPhoto = event.target.files[0];
  this.primaryPhotoUrl = URL.createObjectURL(event.target.files[0]);
  this.isPrimaryPicSelected = true; // 新增这行即可
},

可选方案：原生DOM操作（不推荐） #

如果特殊场景需要直接操作DOM，也可以在回调里直接获取label元素修改样式，但不符合Vue数据驱动的设计理念，不推荐使用：

onPrimaryPicSelected(event) {
  this.primaryPhoto = event.target.files[0];
  this.primaryPhotoUrl = URL.createObjectURL(event.target.files[0]);
  // 直接操作DOM修改样式
  const labelEl = document.getElementById('img1');
  labelEl.style.borderColor = '#10b981';
  labelEl.style.backgroundColor = '#f0fdf4';
},

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