Switch開關：
?
根據需求可知，Switch開關只有兩種選擇，true或false。所以我們想到HTML的checkbox控件，用它來做。
<input id="switch" type="checkbox" class="switch" />
但是在瀏覽器中，checkbox是有固定形狀的（對勾），所以我們并不能直接修改checkbox的樣式。
那我們該修改一個什么東西的樣式變成開關呢？所以我們聯想到 label 標簽，為什么呢？因為label標簽的for屬性可以綁定表單控件，點擊label標簽，就相當于你點擊了綁定的那個控件。
<label for="switch">test</label>
?
廢話不多說，直接上完整代碼：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><link rel="stylesheet" href="css/test.css" /></head><body><div class="switch-container"><input id="switch" type="checkbox" class="switch" /><label for="switch" onclick="test()"></label></div><script>var test = function(){console.log(!document.getElementById('switch').checked ? "選中" : "未選中");}</script></body>
</html>?
/*開關的大小*/
.switch-container {height: 15px;width: 30px;
}/*設置checkbox不顯示*/
.switch {display: none;
}/*設置label標簽為橢圓狀*/
label {display: block;background-color: #EEEEEE;height: 100%;width: 100%;cursor: pointer;border-radius: 25px;
}/*在label標簽內容之前添加如下樣式，形成一個未選中狀態*/
label:before {content: '';display: block;border-radius: 25px;height: 100%;width: 15px;background-color: white;opacity: 1;box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);-webkit-transition: all 0.2s ease;
}/*在label標簽內容之后添加如下樣式，形成一個選中狀態*/
label:after {position: relative;top: -15px;left: 15px;content: '';display: block;border-radius: 25px;height: 100%;width: 15px;background-color: white;opacity: 0;box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);-webkit-transition: all 0.2s ease;
}/* ~ 兄弟選擇符。p~ul ：位于 p 元素之后的所有 ul 元素
*//*選中后，選中樣式顯示*/
#switch:checked~label:after {opacity: 1;
}/*選中后，未選中樣式消失*/
#switch:checked~label:before {opacity: 0;
}/*選中后label的背景色改變*/
#switch:checked~label {background-color: green;
}?
?
如果你用了sass，可以設置變量，來改變你的開關的大小。
$switchHeight: 30px;
$switchWidth: 60px; /*改變大小只需要改變這個兩個的值，后面會用到這兩個值*/
.switch-container {height: $switchHeight;width: $switchWidth;margin-bottom: 5px;.switch {display: none;}label {display: block;background-color: #EEEEEE;height: 100%;width: 100%;cursor: pointer;border-radius: 25px;}label:before {content: '';display: block;border-radius: 25px;height: 100%;width: $switchHeight;background-color: white;opacity: 1;box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);-ms-transition: all 0.2s ease; /* IE 9 */-moz-transition: all 0.2s ease; /* Firefox */-webkit-transition: all 0.2s ease;/* Safari and Chrome */-o-transition: all 0.2s ease; /* Opera */}label:after {position: relative;top: -$switchHeight;left: $switchHeight;content: '';display: block;border-radius: 25px;height: 100%;width: $switchHeight;background-color: white;opacity: 0;box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);-ms-transition: all 0.2s ease; /* IE 9 */-moz-transition: all 0.2s ease; /* Firefox */-webkit-transition: all 0.2s ease;/* Safari and Chrome */-o-transition: all 0.2s ease; /* Opera */}#switch:checked~label:after {opacity: 1;}#switch:checked~label:before {opacity: 0;}#switch:checked~label {background-color: green;}
}
Vue.extend構造器)
)
