vue多个class属性_vue动态绑定多个样式
vue动态绑定多个样式
在项⽬开发的过程中遇到这样⼀个需求：有⼀个节点的状态的显⽰，使⽤了element的时间线的组件，但是这个节点的状态有⼗⼏种，不同的状态有不同的显⽰⽅式，也就是说动态绑定样式。
cssclass属性1、⼀开始的想法
这原本不复杂，但是由于样式太多(⼗⼏种)，⼀堆都写在标签内的话，代码⾮常的不美观，因此想⽤⼀个好⼀点的⽅式去实现。
使⽤:遍历的⽅法动态的绑定样式，但是后端接⼝返回的数据⾥是没有节点的color的属性的，因此需要在获取到值之后遍历⼀遍，根据不同的状态塞⼊不同的颜⾊值。
但是写完之后问题来了，颜⾊并没有改变，检查元素发现，内联样式已经成功动态加上去了。
但是由于这个组件内的⼦元素设置了样式，覆盖掉了⽗元素的内联样式，但是该⼦元素的样式是element默认的，在index.css⾥，⽆法修改，需要使⽤ /deep/ 来修改，因此动态绑定内联样式这种⽅法⾏不通。
2、动态绑定class
动态绑定class的写法是:class="{‘activeClass’: activeName}"，但是对于有实际中颜⾊的动态样式来说，将代码都写在html⾥是代码是⾮常不美观的，因此，最后产⽣了这样的写法。
1、⾸先在template⾥这样写，item是遍历的每⼀个元素为了在⽅法⾥可以拿到每个节点的状态。
2、在methods⾥写⽅法然后根据不同的状态返回不同的class。
methods: {
// 动态绑定选项的样式
switchClass (item) {
return {
"success-node-timeline": item.state === "SUCCESS",
"failure-node-timeline": item.state === "FAILURE",
"submitsuccess-node-timeline": item.state === "SUBMITTED_SUCCESS",
"runningexeution-node-timeline": item.state === "RUNNING_EXEUTION",
"redaypause-node-timeline": item.state === "READY_PAUSE",
"pause-node-timeline": item.state === "PAUSE",
"redaystop-node-timeline": item.state === "READY_STOP",
"stop-node-timeline": item.state === "STOP",
"needfaulttoerance-node-timeline":
item.state === "NEED_FAULT_TOLERANCE",
"kill-node-timeline": item.state === "KILL",
"waittingthread-node-timeline": item.state === "WAITTING_THREAD",
"waittingdepend-node-timeline": item.state === "WAITTING_DEPEND"
};
},
}
但是这种⽅法还是感觉不是最好的实现⽅法，感觉可能会有更好的⽅法，如果⼤家有更好的⽅法，欢迎评论区评论交流呀~
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论