vue系列：鼠标划入增加类名

解决

@mouseenter="enterBlock($event)"
@mouseleave="leaveBlock($event)"

enterBlock (event) {
  event.currentTarget.classList.add('active')
},
leaveBlock (event) {
  event.currentTarget.classList.remove('active')
}

复习js增加类名的方案

1、setAttribute()

document.getElementById("box").setAttribute('class','box')

2、className

document.getElementById("box").className="box"

3、classList

classList属性是只读的，不能通过直接赋值来进行修改元素的类名，但是可以通过add()、remove()和toggle()方法对classList进行修改。

//el是对元素的对象引用
//添加一个或多个类名
el.classList.add("class1");
el.classList.add("class1","class2"...);

//删除一个或多个类名
el.classList.remove("class1");
el.classList.remove("class1","class2"...);

//切换元素类名
el.classList.toggle("classname")

//判断元素是否含有某个类名，如果有返回true，否则返回false
el.classList.contains("classname")