react 和vue 的动态style和class

react 和vue 的动态style和class

 

style

react

<span style={{"border-bottom-color":rankName==0?"#68A4FF":"#C6C6C6"}} className="arrows-rank-up"></span>

<div style={{display: (index===this.state.currentIndex) ? "block" : "none", color:"red"}}>此标签是否隐藏</div>

vue

html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

 class

react

<div className={["container tab", index===this.state.currentIndex?"active":null].join(' ')}>此标签是否选中</div>

<div className={`container tab ${index===this.state.currentIndex?"active":null}`}>此标签是否选中</div>

vue

<div :class="[isActive==index?'active':'otherActiveClass']"></div>

<div :class="[{ active: isActive==index }, 'sort']"></div>