vue给伪类动态添加样式

对于我们动态添加样式，可以在:style里面，但是伪类动态添加就不行了，我就在想能不能在data中定义，然后在伪类中使用

我是在一个组件中使用的，小伙伴只需要看伪类动态的样式即可

JQuery中有一个hover方法，举个例子：

当鼠标指针悬停在上面时，改变 <p>元素的背景颜色：

$("p").hover(function(){

$("p").css("background-color","yellow")

},function(){

$("p").css("background-color","pink")

})

原生js里面可以用onmouseenter和onmouseleave实现。

如果一定要添加：hover伪类的话，就只能修改css样式了。。这个我查了好久还是不知道怎么办。

1、动态伪类选择器

不同的状态，使用不同的样式。

E: link

E: visited

E: active

E: hover

E: focus

2、目标伪类选择器

用来匹配页面的URI中某个标识符的目标元素。

E: target

选择匹配E的所有元素，且匹配元素被相关URL指向。

3、语言伪类选择器

用来匹配使用指定语言的元素。

E: lang(language)

4、元素状态伪类选择器

当元素处于某种状态下时，才起作用，在默认状态下不起作用。

E: checked

eg: input[type="checkbox"]:checked{}

E: enabled

eg: input[type="text"]:checked{}

E: disabled

eg: input[type="text"]:disabled{}

5、结构伪类选择器

这个就比较多了，平时用的也比较频繁。

: nth-child

: nth-last-child

: nth-of-type

: nth-last-of-type

: first-child

: last-child

: only-child

: first-of-type

: last-of-type

: only-of-type

: root 匹配元素所有在文档的根元素

: empty 选择没有子元素的元素，且不包含节点

6、否定伪类选择器

E: not(F) 匹配所有除F外的E元素

---