vue中class名为变量的几种写法
1、class名只有一个,只不过是变量<template><div :class="classname"></div></template><script>export default {data() {return {classname: 'haha'}}}</script>2、通过对象形式此种方式适合针对固定的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') // 删除
更多推荐
已为社区贡献4条内容
所有评论(0)