四 Class与Style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

4.1 对象语法

当 profile 为 true 时 class属性会显示 active

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

普通属性与v-bind:class属性共存; 仅当 profile 或者 develop 为 真 时 才会渲染 active 或者 major

<div class="static" v-bind:class="{ active: profile, 'major': develop }"></div>

当 绑定值有多个建议使用计算属性

4.2 数组语法

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

渲染结果

<div class="profile active"></div>

4.3 在数组语法中使用对象语法

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

渲染结果

<div class="active active"></div>

4.4 在组件中使用对象语法

声明一个组件 zszxz-component, 在组件中使用对象语法

 <div id="app">
        <zszxz-component :class="{active: profile}"></zszxz-component>
    </div>
    <script type="text/javascript">
    Vue.component('zszxz-component', {
        template: '<p class="foo">Hi</p>'
        });
        var app = new Vue({
            el: '#app',
            data: {
                profile : true,
            },
        })
    </script>

渲染结果

<p class="foo active">Hi</p>

4.4Style对象语法

v-bind:style 同样也有对象语法，数组语法；

对象语法十分直观,非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名;

v-bind:style 使用对象语法示例

<div id="app">
        <div :style="{ color: color, fontSize: fontSize }">知识追寻者</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                color : 'pink',
                fontSize : 14+ 'px',           
             },
        })
    </script>

渲染结果

<div style="color: pink; font-size: 14px;">知识追寻者</div>