这一篇我们讲Vue中的动态切换，动态切换 class 和 style，用对象的写法和数组的写法进行一个内容演示；之后同样我们结合一个 v-for 完成一个小案例；

        上一篇内容讲到 v-model 可以实现数据的双向绑定，v-model是通过数据来驱动视图的，而今天讲的这个是v-bind，它是一个数据的单向绑定，因为它无法实现视图驱动数据。

一如既往，先来讲一个 v-bind 的简单例子；

v-bind 

<div id="app">
		<input type="text" v-bind:value="msg" /> 
    </div>

    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                msg:'请输入...'
            }
        })
    </script>

了解v-bind指令的单项绑定，同时 v-bind 可以简写成 " : "，例如 v-bind:style 可以简写成 :style

<input type="text" :value="msg" /> 

 动态切换 v-bind:class ( :class ) - 对象

•  用对象语法写

<style>
    .classObj{
        color:#3BA776;
    }
</style>

<div id="app">
        <div :class="isClass">
            动态切换 - 对象写法
        </div>
</div>

<script type="text/javascript">
     var vm = new Vue({
         el:'#app',
          data:{
              isClass:{
                classObj:true
              }
          }
     })
</script>

isClass对象中的classObj的布尔值为true，则表示 :class = "isClass" => class = "classObj" ，字体会显示对应的样式；

当然可以通过控制台 vm.isClass = false 测试，那么如果我需要添加进去一个class样式( best )进去呢？在控制台上输入 vm.isClass.best = "true" ，返回值是true，返回到 [ Elements ] 查看结构，会发现并没有添加一个class为best的类名进去；

那么如何插队进去呢，Vue提高了这么一条通道，用这个 Vue.set( )方法 

以上就是这个动态切换class的对象写法；接下来讲动态class的数组写法；

动态切换 v-bind:class ( :class ) - 数组

<style>
    .classArr1{
        color:red;
    }
    .classArr2{
        font-size: 30px;
    }
</style>
<div id="app">
    <div :class="isClass">
        动态切换 - 数组写法
    </div>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el:'#app',
        data:{
            isClass:[ 'classArr1','classArr2' ]
        }
    })
</script>

 通过 isClass数组 将所需用到的样式添加到数组中去；

那么如何添加样式和去掉不需要的样式呢？比起对象写法是不是就很容易联想到数组的添加和删除方法，往数组里添加对应的样式，删除同理；那么我们在数组的后面添加一个类名为 best 的样式，在控制台上输入 vm.isClass.push('best') ，查看[ Elements ] 查看结构，会发现后面添加一个class为best的类名进去了；

接下来我们将类名为classArr2从数组删除，样式为font-size：30px；的效果也会随之消失； 

         以上的内容就是动态切换class的对象写法和数组写法，通过 v-bind 指令绑定class 来动态控制页面的样式效果，这一篇讲完了v-bind动态控制class的用法，下一篇内容将v-bind动态控制style的用法和外加一个小案例，动态切换class和style的用法其实是同理的。