vue中:class同时放变量和固定类名

一、场景

? ? ? ?在工作中遇到，本身div是有固定class类名来写样式，但是当特殊情况下，div的高度可能会随着页面传参的不同发生改变，这时候需要再添加一个动态类名来改变样式。查了下网上关于这方面的文章甚少，今天就具体分析一下。

二、操作

1. :class数组写法

? ? 如代码所示，:class可以是数组格式，这时候本来固定的标签’fixedName’为数组的一个值，另外一个值’changeName’是由changeData这个值true或者false来决定的。

<div :class=”[‘fixedName’, [!changeData? ‘changeName’: ”]]”></div>

2. :class对象写法

? ? ? 如代码所示，:class也可以是对象格式，这时候定义’fixedName’这个值为true，’changeName’值由changeData的true或者false来决定。

<div :class=”{‘fixedName’: true, ‘changeName’: !changeData}”></div>