開(kāi)篇一句話：CSS的偽類秩仆，偽元素就當(dāng)成vue的過(guò)濾器使用就好了，我也是想到這個(gè)突然就茅塞頓開(kāi)了。
用法：
:after 選擇器表示向選定的元素之后插入內(nèi)容。
要有content屬性
需求舉例：div按鈕后面有個(gè)朝下的ico,點(diǎn)擊div后 ico方向朝上
點(diǎn)擊前
點(diǎn)擊后
實(shí)現(xiàn)辦法:
1.可以使用JS實(shí)現(xiàn)叙甸，div的class名綁定到一個(gè)變量上，根據(jù)變量的真假值更換class
<div :class="[xxxvar?'class_1':'class_2']"></div>
2.偽類的實(shí)現(xiàn)方法
先說(shuō)思路：
要借助兩個(gè)class位衩，基礎(chǔ)class('base_class')和激活class('rotate').
base_class
相對(duì)定位裆蒸。
base_class:after
放ico朝上的樣式，絕對(duì)定位糖驴。
rotate不要單獨(dú)加after光戈，不然會(huì)取代掉base_class的after,
要兩個(gè)class都出現(xiàn)才加after
rotate綁定到一個(gè)布爾變量上，該變量的真假值由open_select_window更改
html:
<div :class="{'base_class':true,'rotate':open_small_window}"
@click.prevent="open_select_window">
</div>
.base_class{
position:relative;
width: 1.6rem;
text-align: right;
color: #ff7500;
font-size: .26rem;
margin-right: 16px;
height: 0.32rem;
line-height: 0.32rem;
padding-right: .28rem;
}
.base_class:after{
content:'';
position: absolute;
display: block;
top: .1rem;
right: 0;
width: .16rem;
height: .16rem;
background: url('../../../assets/images/icons/xiala@2x.png') no-repeat;
background-size: .16rem, .1rem;
background-position: right;
}
.base_class.rotate:after{
transform:rotate(180deg)
}
