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

2024-01-21 22:47| 来源: 网络整理| 查看: 265

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

export default { data() { return { classname: 'haha' } } }

2、通过对象形式

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

export default { data() { return { show: true', } } }

3、通过数组

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

export default { data() { return { show: true', classname2: 'haha2', classname3: 'haha3', classname4: 'haha4', } } }

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

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

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

export default { data() { return { show: true', classname2: 'haha2', classname3: 'haha3', classname4: 'haha4', } } }

5、利用js增加或删除class

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

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

【本文地址】

公司简介

联系我们