动态添加class样式，React，jQuery，Vue，ES6，一篇文章解释所有

参考文章：
https://blog.csdn.net/suwyer/article/details/81481507?utm_source=copy

一.React中动态添加样式

1.ES6反向单引号(推荐)

此种方法适用于给已经存在className的元素动态新增class样式，使用时注意

• 下面代码中不是单引号'，而是 反向单引号 `
• 这个符号在键盘上Esc的下面
  
• es6中反向单引号包括了所有单引号的功能，用来表示字符串，并且再此基础上，通过${}可以在其内部写上变量名

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

2.直接添加到style中

使用小括号()是浏览器在检测到小括号后，会进行js运算，解析小括号里面的代码，然后再通过三元运算符来控制某个属性

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

3.改变className

类似于上面，只不过不是直接修改样式，而是通过改变类名来修改
①.本身没有className

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

②.已经有className的动态添加

• 方法一：通过 join切割类名组成的数组，注意：单引号里面是空格

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

• 方法二：直接在state中定义一个变量，拼接字符串， 注意：container后面要有空格

<div className={'container ' + this.state.active}>
   此标签是否选中
</div>

二.jQuery动态添加样式

1.addClass添加类名

$(span).addClass("alike");    //添加类名
$(span).removeClass("alike"); //移除类名

2.css直接修改样式

$(span).css("color", "red").css("border", "1px solid #000");

三.Vue中动态添加样式

1.通过属性绑定:class设置

<div @click="changeClass()" :class="{showColor:change}">
	<span>切换颜色</span>
</div>

js

export default {
    data(){
        return{
            show:true 
        }
    },
    methods:{
        changeClass(){
            this.show = !this.show;
        }
    }
}

css

.changeColor{
   border:1px solid red;
}