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>