開關效果經常出現在很多網頁設計中，特別是在設置面板和用戶交互功能頁面。實現開關效果需要用到CSS，除了手寫CSS，我們也可以使用Vue JS框架來輕松實現這種效果。

這段代碼定義了一個Vue組件，“switch”樣式類用來定義開關效果的樣式。在HTML模板中，我們使用了一個標簽來實現開關按鈕，利用v-model指令來綁定改變開關狀態，使用@change指令來監聽開關狀態變化事件。

在CSS中，我們利用:before和:after偽元素來定義開關的兩側-圓形按鈕和燈光。此外，我們還定義了開關的兩種狀態分別為active和非active狀態。在組件中，我們利用:class指令來實現根據數據active的狀態來動態切換“active”樣式。 在組件的methods中的handleSwitch函數中，我們使用console.log語句來輸出active狀態變化的結果。

通過這段代碼，我們可以看到Vue的模板語法和組件化思想，以及在CSS中使用偽元素和: active偽類的快捷方式，讓我們輕松實現開關效果。