vue css伪元素after的使用

html-css011

vue css伪元素after的使用,第1张

开篇一句话:CSS的伪类,伪元素就当成vue的过滤器使用就好了,我也是想到这个突然就茅塞顿开了。

用法:

:after 选择器表示向选定的元素之后插入内容。

要有content属性

需求举例:div按钮后面有个朝下的ico,点击div后 ico方向朝上

实现办法:

1.可以使用JS实现,div的class名绑定到一个变量上,根据变量的真假值更换class

2.伪类的实现方法

先说思路:

要借助两个class,基础class('base_class')和激活class('rotate').

base_class

相对定位。

base_class:after

放ico朝上的样式,绝对定位。

rotate不要单独加after,不然会取代掉base_class的after,

要两个class都出现才加after

rotate绑定到一个布尔变量上,该变量的真假值由open_select_window更改

html:

我觉得还是把a标签嵌在div里面比较合适。。。

"><div style="width:300pxheight:300pxborder:1px solid #ff0000cursor:pointer"><a href="http://www.52buyers.com">真假辨别</a></div>