vue class 样式动态绑定几种方式

动态class对象：<div :class="{ 'is-active': true, 'red': isRed }"></div>
动态class数组：<div :class="['is-active', isRed ? 'red' : '' ]"></div>
动态style对象：<div :style="{ color: textColor, fontSize: '18px' }"></div>
动态style数组：<div :style="[{ color: textColor, fontSize: '18px' }, { fontWeight: '300' }]"></div>

1.三元表达式

<div :class="ifShow ? 'new-class' : 'old-class' ">

</div>
...
data: {
  ifShow: true //通过计算改变ifShow的值来实现加载class属性
},
<style>
  . new-class {}
  . old-class {}
</style>

2.设置一个对象的方式

<div :class="{'new-class': isShowNew, 'old-class': isShowOld}">

</div>
...
data: {
  isShowNew: true,
  isShowOld: old
},
<style>
  . new-class {}
  . old-class {}
</style>

3.设置一个数组

<div :class = "[class1, class2]"> </div>
...
data: {
  class1: 'new-class",
  class2: 'old-class'
},
<style>
  . new-class {}
  . old-class {}
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容