Vue中的class动态样式切换

class和:class区别

一、要想了解使用:class，首先要了解Vue中的:class与HTML中的class有什么区别

1、在HTML中的class，指的就是关于页面的样式层叠表，就是写一些样式起到美化页面的作用，并且这些样式都是静态，并且写死的，是不会改变的。

2、在Vue中的:class，指的虽然也是关于页面的样式层叠表，但是它是动态的样式。是可以进行切换的。因为:class是简写的形式，正确的写法因该是v-bind:class，并且在Vue中该样式如果需要生效则必须得让条件成立，即布尔值为true才可以。Vue.js 的核心是一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的DOM 将与数据保持同步，每当数据有改动，相应的DOM视图也会更新。基于这种特性，通过Vue.js动态绑定class就变得非常简单。

二、class和:class的用法

HTML中的class直接将对应的类名进行操作即可实现

.blue{
  color: #096dd9;
}

.blue:hover{
  color: #40a9ff;
}

.gray{
  color: #ccc;
}

Vue中的:class（正巧我们公司最近提到了一个需求，就运用到了）

方式一：三元判断加以对象的形式（第一个参数 类名， 第二个参数：boolean 值）

未设计之前执行标签为初始颜色

设计动态class样式以后，点击执行标签时，通过三元的判断方式，判断某些参数来执行。可以看到只有当前的标签可以点击进入操作并且已被动态绑定blue属性，其他的执行标签置灰并且都被绑定gray属性，并且如果点击后，会弹出相应的提示，结束上一个执行任务，才可以执行下一个执行任务。当结束任务时，又会恢复到原来的状态并不会造成干扰

方式二：三元判断加动态数组里的变量的形式（放在数组中，对每个类名状态进行判断）

<div :class="[ record.executeStatus === 'IN_PROGRESS'? {blue:isblue} : {gray:isgray} ]">
</div>

还有几种常见的方式，就不详细列举啦~就这两种削微复杂一点，看个人喜好运用