html、vue、微信小程序、react、HandleBars场景的动态添加class归纳

html、vue、微信小程序、react、HandleBars场景的动态添加class归纳

经常在不同框架、不同场景下使用动态class，虽然不是什么难的东西，但是我真的记不住。。==||

一、vue

//1.对象写法
	:class="{'type1': true, 'type2': false}"
	
//2.数组写法
	:class="['type1', {'type2':true}]"
	
//3.三元表达式
	:class="['type1', index===1?'type2':'']"

二、微信小程序开发

class="type1 {{index === 1 ? 'type2' : ''}}"
//注意小程序这里class不用加冒号：   
//内部的class类 也不需要单独加引号

<view class="{{isShow?'class1':'class2'}}"></view>
data: {
  isShow:true
}

三、HandleBars

//下面两个写法意思差不多的，看哪个使用方便了
//三木运算（有得选）
<p :class="['type1', active ? 'type2':'type3']"></p>

//某个class的true/false（爱要不要）
<div :class="['type1', {'type2': status !== 1}]"></div>

四、react

<div className={index===1?"type1":null}></div>
//动态追加class
<div className={["type1 type2", index===1?"type1":null].join(' ')}></div>

//动态追加class ES6的写法
<div className={`type1 type2 ${index===1?"type3":null}`}></div>

普通的html追加class 就是通过操作dom节点的方式了