2022第十三屆藍橋杯第一次開放了web組賽道，博主作為一名前端小白，參加了這次比賽。一共十個題目，目的均是實現特定的網頁效果，考點包含三件套、jQuery和vue，這里簡單的進行一下個人的題解記錄。
目錄
01 水果拼盤（5分）
02 展開你的扇子（5分）
03 和手機相處的時光（10分）
04 燈的顏色變化（10分）
05 冬奧大抽獎（15分）
06 藍橋知識網（15分）
07 布局切換（20分）
08 購物車（20分）
09 尋找小狼人（25分）
10 課程列表（25分）
總結
01 水果拼盤（5分）
題目簡要介紹：
初始效果：
目標：
目標效果：
解題方式：所有十五個水果的父盒子采用的是flex布局，直接設置flex-flow屬性即可。如下圖所示：
02 展開你的扇子（5分）
題目簡要介紹：
初始效果：
目標：
目標效果：
解題方式：給每個div設置transform: rotate();屬性即可。大致可參照下圖：
03 和手機相處的時光（10分）
題目簡要介紹：
初始效果：
目標：
解題方式：x坐標軸和y坐標軸字段交換一下，然后改下字段下的屬性就行。修改后如下圖所示：
04 燈的顏色變化（10分）
題目簡要介紹：
初始效果：
目標：
目標效果：
解題方式：通過js修改display屬性控制顯示和隱藏，然后設個延時器即可。如下圖所示：
05 冬奧大抽獎（15分）
題目簡要介紹：
初始效果：
目標：
目標效果：
解題方式：使用jQuery的addClass和removeClass即可，抽獎結束后設置一下text()，如下圖所示：
06 藍橋知識網（15分）
題目簡要介紹：
初始效果：無，本題目標是復刻一個靜態頁面。
目標：
目標效果：
解題方式：這題是復刻靜態頁面，不需多說，設置好版心區，然后分別設置網頁的top區、middle區和bottom區，往對應區添加東西就行。
07 布局切換（20分）
題目簡要介紹：
初始效果：
目標：
目標效果：
解題方式：這題開始和vue相關，只需要在mounted下請求一下goodsList數據，然后給大圖圖標和列表圖標綁定一下onclick方法就行。（本來vue不建議直接操縱DOM元素，不過我還是這么做了）如下圖所示：
08 購物車（20分）
題目簡要介紹：
初始問題：
目標：
目標效果：
解題方式：加入購物車前檢查一下購物車有沒有當前商品，將商品數量減少到0的時候在購物車數組中移除（splice）當前商品就可以，如下圖所示：
09 尋找小狼人（25分）
題目簡要介紹：
初始效果：
目標：
目標效果：
解題方式：簡單來說就是自己實現數組的filter方法，這倒是我第一次實現該方法，本來都要忘記filter方法了。我個人覺得，這個實現方式稍顯精妙。如下圖所示：
10 課程列表（25分）
題目簡要介紹：
初始效果：
目標：
目標效果：
解題方式：初始請求一下第一頁的五個數據，然后上一頁/下一頁就請求當前頁數（pageNum）下的五個數據，這點只需要判斷完當前頁數，把當前頁數前面的所有數據不拿就行。本題代碼補全具體如下：
初始化頁面時請求一次第一頁數據：
點擊上一頁的實現：
點擊下一頁的實現（和點擊上一頁幾乎一樣）：
總結
十個題目的難度不大，雖然都實現了但代碼寫的自我感覺其實不太滿意。