我試圖在Vue上為這個<label>標簽添加樣式。
<div class="grid-cols-1 mt-5 mx-7" >
<label class="uppercase md: text-sm text-xs text-gray-500 text-light font-semibold mb-1 flex items-center justify-center">Upload Photo</label>
<div class='flex items-center justify-center w-full'/span>>
< label id="img1" class='flex-col border-4 border-dashed w-40 h-32 hover: bg-gray-100 hover:border-purple-300 group'>
< div @click="onPrimaryPicSelected" class='flex flex-col items-center justify-cent pt-7'>
<svg class="w-10 h-10 text-urple-400 group-hover: text-purple-600" fill="none"/span> stroke="currentColor" viewBox="0 0 24 24" xmlns="http: //www. w3. org/2000/svg">< path stroke-lineecap="round"/span> stroke-linejoin="round" stroke-width="2" d="M4 16l4。 586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01 M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/span>>< path></svg>>
<p class='lowercase text-sm text-gray-400 group-hover: text-purple-600 pt-1 tracking-wider'>選擇照片</p>
</div>/span>
< input type='file' class="hidden" />
</label>
</div>>
</div>
我希望當onPrimaryPicSelected函式被呼叫時，在<label>標簽上添加一個css樣式。如果可以的話，我怎樣才能做到這一點呢？
目前，onPrimaryPIcSelected只是獲得上傳的圖片。
onPrimaryPicSelected(event) {
this.primaryPhoto = event.target.files[0] 。
this.primaryPhotoUrl = URL. createObjectURL（event.target.files[0]）。
},
uj5u.com熱心網友回復：
你可以使用一個布爾變數，如果為真，它將把你的風格應用到標簽標簽上。
<div class="grid grid-cols-1 mt-5 mx-7" >
<label class="uppercase md: text-sm text-xs text-gray-500 text-light font-semibold mb-1 flex items-center justify-center"/span> :style="selected ? 'your-style-here' : ''">上傳照片</label>
<div class='flex items-center justify-center w-full'/span>>
< label id="img1" class='flex-col border-4 border-dashed w-40 h-32 hover: bg-gray-100 hover:border-purple-300 group'>
< div @click="onPrimaryPicSelected" class='flex flex-col items-center justify-cent pt-7'>
<svg class="w-10 h-10 text-urple-400 group-hover: text-purple-600" fill="none"/span> stroke="currentColor" viewBox="0 0 24 24" xmlns="http: //www. w3. org/2000/svg">< path stroke-lineecap="round"/span> stroke-linejoin="round" stroke-width="2" d="M4 16l4。 586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01 M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/span>>< path></svg>>
<p class='lowercase text-sm text-gray-400 group-hover: text-purple-600 pt-1 tracking-wider'>選擇照片</p>
</div>/span>
< input type='file' class="hidden" />
</label>
</div>>
</div>
然后在你的函式中
onPrimaryPicSelected（event）{
this.selected = true;
this.primaryPhoto = event.target.files[0] 。
this.primaryPhotoUrl = URL. createObjectURL（event.target.files[0]）。
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/310013.html
標籤：
下一篇：承諾鏈中的例外處理