1.绑定class的几种方法

1.1对象语法

<div id="app">
            <p>姓名:{{name}}</p>
            <input type="text" v-bind:value="description" />
            <a v-bind:href="url">{{website}}</a>
            <img :src="avatar">
        </div>
        <script type="text/javascript">
            // 实例化一个vue对象
            var app = new Vue({
                el: '#app',
                data: {
                    name: '尤雨溪',
                    description: 'Vue.js的创立者',
                    website: 'vue.js官网',
                    url: 'https://cn.vuejs.org/',
                    avatar:' https: //gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=c08a0c60a844ad342ebf8081e8996bc9/4afbfbedab64034f29596c8ba6c379310b551da2.jpg'
                }
            })
        </script>

结果

image.png

注意:":class"等同于"v-bind:class"是一个语法糖

1.2.2数组语法

<div id='app'>
    <div :class="[activeCls,errorCls]"></div>
</div>
<script>
     var app=new Vue({
         el:'#app',
         data:{
            activeCls:'active',
            errorCls:'error'
         }
})
</script>

渲染后的结果为:
<div class="active error"></div>

1.2.3在组件上使用

如果直接在自定义组件上使用class或:class,样式规则会直接应用到这个组件的根元素上