Vue动态改变class和style的一些方法

动态绑定class、style的方法

• :class="{'class1':'true'=='true',class2:status=='status'}"

这句话的意思是，class1和class2都是两个样式，但是class1是必须存在的，class2是要根据data里面的status的状态来决定是否存在的，class1必须存在，之前试过很多种方法，都不能正确显示，所以我就强制加了一个判断条件：true==true，然后后面的是动态绑定内容（动态绑定）

• ref="one"

对于想改变的地方绑定一个ref，让参数按照引用传递

然后可以在下面的函数中来改变，例如：

this.$refs.one.style.border = "1px solid red";

• 使用$event；

在需要改变的地方，加入$event参数（如果只有一个不加也可以），例如：

@click="changeClass($event)"

下面的函数处理：

changeClass(e){ 
    console.log(e.target);
    //可以打印出来e.target里面的值，其实就是页面的dom元素，然后可以按照自己想法更改样式了，还可以根据e找到页面所有节点
    //例如：e.target.parentNode.style.border = "1px solid red"; 
}

暂时我所接触到的方法就是以上三种，欢迎补充