Class 与 Style 绑定HTML Class(vue.js)_html style class声明-CSDN博客

本文链接：https://blog.csdn.net/gaoxiaoba/article/details/52756731

(1) 我们可以传给 v-bind:class 一个对象，以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存：

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

 <script>
       
       var vm = new Vue({
          el: '#static',
          data: {
              isA: true,
              isB: false
          }
        });

    </script>

渲染为：

<div class="static class-a"></div>

当 isA 和 isB 变化时，class 列表将相应地更新。例如，如果 isB 变为 true，class 列表将变为 "static class-a class-b"。

也可以直接绑定数据里的一个对象：

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    'class-a': true,
    'class-b': false
  }
}

(2) 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

<div v-bind:class="[classA, classB]">

data: {
  classA: 'class-a',
  classB: 'class-b'
}

渲染为：

<div class="class-a class-b"></div>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[classA, isB ? classB : '']">

此例始终添加 classA，但是只有在 isB 是 true 时添加 classB 。