如何解决Vue.js-多条件类绑定
基于多个条件将类绑定到标签的正确方法是什么?
鉴于此标记,似乎在尝试编写多个条件时一个条件被另一个条件覆盖。
<q-tr :props="props"
:class=["(props.row.Name=='Row Name 1' || props.row.Name=='Row Name 2')?'text-bold':'bg-white text-black',(props.row.Name=='Row Name 3')?'text-green':'bg-white text-black']
>
</q-tr>
因此在上面的示例中,text-bold
类被bg-white text-black
覆盖,因为第二个条件覆盖了第一类绑定。
在vue类绑定中,有没有办法以if,else if,else
样式构造条件?
解决方法
将该类属性绑定到名为myClass
的计算属性:
<q-tr
:class="myClass"
>
</q-tr>
computed:{
myClass(){
if(this.props.row.Name=='Row Name 1' ){
return 'text-bold';
}
else if( this.props.row.Name=='Row Name 3'){
return 'text-green';
}
else{
return 'bg-white text-black'
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。