Vue动态改变class和style的一些方法
动态绑定class、style的方法:class="{'class1':'true'=='true',class2:status=='status'}"这句话的意思是,class1和class2都是两个样式,但是class1是必须存在的,class2是要根据data里面的status的状态来决定是否存在的,class1必须存在,之前试过很多种方法,都不能正确显示,所以我就强制加了一个判断条件...
·
动态绑定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";
}
暂时我所接触到的方法就是以上三种,欢迎补充
更多推荐
已为社区贡献2条内容
所有评论(0)