2025-03-10-天氣查詢應用程式」的最後一步
2025-03-10-天氣查詢應用程式」的最後一步
🌦️ 天氣查詢應用程式
📅 資料時間：
<div class="checkbox-group">
<label class="region-row">
<span class="region-title">全部：</span>
<input
type="checkbox"
value="全部"
v-model="selectedCities"
@change="handleAllToggle"
/>
<span>全部城市</span>
</label>
<div v-for="(cities, region) in cityGroups" :key="region" class="region-row">
<span class="region-title">{{ region }}：</span>
<label v-for="city in cities" :key="city" class="city-checkbox-inline">
<input
type="checkbox"
:value="city"
v-model="selectedCities"
:disabled="selectedCities.includes('全部')"
/>
{{ city }}
</label>
</div>
</div>
<p>✅ 目前選擇：{{ selectedCities.join(', ') }}</p>
<div class="weather-container">
<div
v-for="city in sortedWeatherData"
:key="city.locationName"
class="city-card"
:class="getWxClass(city)"
>
<h3>
🌆 {{ city.locationName }}
<span class="weather-icon">{{ getWxIcon(city) }}</span>
</h3>
<p>☀️ 天氣：{{ getWeatherElement(city, 'Wx') }}</p>
<p>🔥 最高溫：{{ getWeatherElement(city, 'MaxT') }}°C</p>
<p>❄️ 最低溫：{{ getWeatherElement(city, 'MinT') }}°C</p>
<p>🌧️ 降雨機率：{{ getWeatherElement(city, 'PoP') }}%</p>
</div>
</div>