REACT_React动态绑定className,动态绑定样式

ゞ 浴缸里的玫瑰 2022-10-18 12:55 402阅读 0赞

动态绑定className

绑定多个使用[ ],[ ]不是代表一个数组,[ ]内使用字符串拼接形式

字符串拼接形式

  1. <i className={ ["iconfont"+" "+item.icon]} ></i>

ES6 模板字符串

  1. <p className={ `title ${ this.state.addColor?'color':null}`}>标题</p>

join(“ “)

  1. <p className={ ['title',this.state.addColor?'color':null].join(' ')}>标题</p>

有判断条件的

  1. <i className={ ["iconfont ",this.state.isRed ?item.icon :'' ].join('')} ></i>

动态绑定样式

绑定多个使用“,”号隔开

  1. <p style={ { background:"red",color:this.state.color}}>标题</p>

发表评论

表情:
评论列表 (有 0 条评论,402人围观)

还没有评论,来说两句吧...

相关阅读

    相关 Vue 动态样式

    1. 简介 本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完

    相关 C++动态和静态

    为了支持c++的多态性,才用了动态绑定和静态绑定。理解他们的区别有助于更好的理解多态性,以及在编程的过程中避免犯错误。 需要理解四个名词: 1、对象的静态类型:对象在

    相关 动态和静态

    为了支持c++的多态性,才用了动态绑定和静态绑定。理解他们的区别有助于更好的理解多态性,以及在编程的过程中避免犯错误,需要理解四个名词: 1、对象的静态类型:对象在声明时采