关于类与样式的绑定

在Vue中可以使用一个对象来动态传入需要绑定的class

看一个例子
css代码(全文)：

    <style>
        *{
            margin:0;
            padding:0;
        }
        .static{
            background: blue;
            color:yellow;
            border-width: .5px;
            border-style: solid;
            border-radius:2px;
            font-size:48px;
        }
        .active:hover{
            font-weight: bold;
            background-color:blue;
        }
        .text-danger:hover{
            font-weight:bolder;
            background-color:red;
        }
    </style>

例1：

<div id="vm1" v-bind:class="{ active: isActive }">现实点</div>
    <script type="text/javascript">
        var vm1 = new Vue({
            el: '#vm1',
            data: {
                isActive: true
            }
        })
    </script>

我们给vm1这个<div>添加了绑定的类（一个传入对象），在实际的应用中，active为传入类，而isActive为是否应用这个传入类的“真言”，在data域中，isActive为真值，因此在该对象上会应用.active类的hover效果，如下图：

原来的盒子 hover效果触发之后的盒子

确实，我们遇到问题，得想的现实点。。。。

有了上面的例子，我们可以再想一个问题，既然它传入的是一个对象，那一定可以传入不止一个属性，没错，就像下面的例子一样。

<!-- 这个例子就是一个class作为默认属性，另一个动态渲染 -->
    <div id="vm2" class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">兄弟，现实点
    <input type="button" v-on:click="reverse" value="一键现实">
    </div>
    <script type="text/javascript">
        var vm2 = new Vue({
            el: '#vm2',
            data: {
                isActive: true,
                hasError: false
            },
            methods: {
                reverse: function(){
                    this.isActive = !this.isActive;
                    this.hasError = !this.hasError;
                }
            }
        })
    </script>

一传入，还是传的两个，双响。
有几点需要说明的是

• 传入的类个数可以是无穷的
• 如果类名有不适合作为JavaScript对象标识符的字符（比如‘text-danger’中的‘-’），加上引号，js也是认的

• 在第二条的基础上，我们可以推断，实际传入的是个json对象？
  最终效果类似于这样：

  
  原效果
  hover效果
  一键现实之后的效果

当然，绑定的既然是一个对象，你也可以把它扔进data中，只留一个对象名在class里

<!-- 对象名解耦 -->
    <div id="vm3" class="static" v-bind:class="classObject">兄弟，现实点
    <input type="button" v-on:click="reverse" value="一键现实">
    </div>
    <script type="text/javascript">
        var vm3 = new Vue({
            el: '#vm3',
            data: {
                classObject: { 
                  active: true,
                  'text-danger': false 
                }
            }
        })
    </script>

这样的操作空间岂不是更大？（效果同上）

当然这里的“对象”也可以是一个计算属性

<!-- 绑定一个计算属性 -->
    <div id="vm4" v-bind:class="classObject">现实就是如此残酷</div>
    <script type="text/javascript">
        var vm4 = new Vue({
            el: '#vm4',
            data: {
              isActive: true,
              error: null
            },
            computed: {
              classObject: function () {
                return {
                  active: this.isActive && !this.error,
                  'text-danger': this.error && this.error.type === 'fatal'
                }
                //当该组件被激活且没有发生错误时，active类激活
                //当该组件发生错误且为致命错误时，'text-danger'激活
                //可以用于异步等场景？？？
              }
            }
        })
    </script>

应用场景可以是ajax获取数据失败之类的，或者自己抛出的异常
简单的效果：

例子4效果

最后，传入一个数组也是可以的

<div id="vm5" v-bind:class="[activeClass, errorClass]">面对现实，无所畏惧</div>
    <!-- 条件表达式，即始终添加errorClass -->
    <!-- <div id="vm5" v-bind:class="[isActive ? activeClass: '', errorClass]">面对现实，无所畏惧</div> -->
    <script type="text/javascript">
        var vm5 = new Vue({
            el: '#vm5',
            data: {
              activeClass: 'active',
              errorClass: 'text-danger'
            }
        })
    </script>

效果图：

例子5效果图

面对现实，我们要无所畏惧