VUE——v-bind及class、style绑定

一、绑定class的几种方法

1、给v-bind设置一个对象，可以动态的切换class

    <div id="app">
        <div :class="{'active':isActive }"></div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isActive:true
            }
        })
    </script>

　　上述事例中，类名active依赖与数据isActive,当其为true时，div才会拥有累吗active,为false时则没有.

2、对象中也可以传入多个属性，来动态切换 class 。另外，：class 可以与普通 class 共存

    <div id="app">
        <div class="state" :class="{'active':isActive , 'error':isError}"></div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isActive:true,
                isError:false
            }
        })
    </script>

3、当需要应用多个class时，可以使用数组语法，给:calss绑定一个数组应用一个class列表：

    <div id="app">
        <div :class="[isActive,isError]"></div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isActive:'active',
                isError:'error'
            }
        })
    </script>

4、也可以根据三元表达式来根据条件切换class

    <div id="app">
        <div :class="{isActive?activeCls:'',errorCls}"></div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isActive:true,
                activeCls:'active',
                errorCls:'error'
            }
        })
    </script>

　　error会始终应用，active的class会根据isActive来显示。

5、直接在自定义组件上class或:class会直接应用到这个组件的根元素上。

二、绑定内联样式

使用v-bind:style（:style）可以给元素绑定内联样式，方法与class类似，也有对象语法和数组语法，看起来就像直接在元素上写css.