vue中class名为变量的几种写法

1、class名只有一个，只不过是变量

<template>
	<div :class="classname"></div>
</template>
<script>
export default {
	data() {
		return {
			classname: 'haha'
		}
	}
}
</script>

2、通过对象形式

此种方式适合针对固定的class名，判断是否存在此class名称

<template>
	<div :class="{showMe: show, stay: true}"></div>
</template>
<script>
export default {
	data() {
		return {
			show: true',
		}
	}
}
</script>

3、通过数组

数组形式可以放变量、固定有的以及需要判断的class名

<template>
	<div :class="[show ? 'showMe' : '' , 'stay', classname2]"></div>
</template>
<script>
export default {
	data() {
		return {
			show: true',
			classname2: 'haha2',
			classname3: 'haha3',
			classname4: 'haha4',
		}
	}
}
</script>

4、element的select或者类似这个的一些下拉框的class

element的select一类组件都是封装过的，可以通过popper-class给下拉框一个class，这种需要注意的是，不能使用对象或者数组形式的class方式，只接收字符串，这时class名中存在变量时，可以直接通过字符串拼接的形式

需要注意如果此种形式时用到了三目运算符的话，给它一个括号，不然可能会出现一些问题

<template>
	<el-select 
		:popper-class="'stay' + ‘ ’ + (show ? 'showMe' : '') + ' ' + classname2">
	</div>
</template>
<script>
export default {
	data() {
		return {
			show: true',
			classname2: 'haha2',
			classname3: 'haha3',
			classname4: 'haha4',
		}
	}
}
</script>

5、利用js增加或删除class

利用classList的add和remove方法可以方便的对dom的class列表增加或者减少

document.getElementById('app').classList.add('newApp') // 增加

document.getElementById('app').classList.remove('newApp') // 删除