Vue样式绑定class

.active {
            border: 4px solid rgb(3, 27, 240);
            width: 100px;
            height: 100px;
        }
        .error {
            background-color: orangered;
        }
        .test {
            color: white;
        }

<div id="app">
        <div v-bind:class="[activeClass,errorClass]">This is test div</div>
        <button v-on:click="handle">Click</button>
    </div>

var vm = new Vue({
            el: '#app',
            data: {
                activeClass:'active',
                errorClass:'error'
            },
            methods: {
                handle: function () {
                    // 点击按钮去掉activeClass
                    this.activeClass = ''
                }
            }
        })

数组绑定

对象绑定

true就是显示这个样式，false就是不显示

数组绑定可以和对象绑定可以结合使用：

class绑定可以简化操作：

样式绑定会保留默认的class样式

注意：

样式绑定的时候，如果v-bin:class=一个数组[testClass]，那么下面data里要传一个键值对：
testClass:‘test’

下面这样写也没毛病：

开关式：