v-bind 及 class 与 style 绑定

2019独角兽企业重金招聘Python工程师标准>>>

        DOM 元素经常会动态地绑定一些 class 类名或 style 样式。 

一、了解 v-bind 指令

        v-bind 指令的主要用法是动态更新 HTML 元素上的属性，可使用 v-bind 指令绑定 class 和 style 。如下，示例：

   <div id="app">
        <a v-bind:href="url">我是一个链接</a>
        <img v-bind:src="imgUrl">
        <!-- 缩写为 -->
        <a :href="url">我是一个链接</a>
        <img :src="imgUrl">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                url: 'https://www.github.com',
                imgUrl: 'http://bingbinlee.com/img.pang'
            }
        })
    </script>

        链接的 href 属性和图片的 src 属性都被动态设置了，当数据变化时，就会重新渲染。

        在数据绑定中，最常见的两个需求就是元素的样式名称 class 和内联样式 style 的动态绑定，它们也是 HTML 属性，因此可以使用 v-bind 指令。只需要用 v-bind 计算出表达式最终的字符串也可以，不过有时候表达式的逻辑较为复杂，使用字符串拼接方法较难阅读和维护，所以 Vue.js 增强了对 class 和 sytle 的绑定。

二、绑定 class 的几种方式

2.1 对象语法

        给 v-bind:class 设置一个对象，可以动态地切换 class ，例如：

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

        上面示例中，类名 active 依赖于数据 isActive, 当其为 true 时，div 会拥有类名 Active，为 false 时则没有，所以上例最终渲染完的结果是：

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

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

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

        :class 内的表达式每项为真时，对应的类名就会加载，上面渲染后的结果为：

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

        当数据 isActive 或 isError 变化时，对应的 class 类名也会更新。比如当 isError 为 ture 时，渲染后的结果为：

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

        当 :class 的表达式过长或逻辑复杂时，还可以绑定一个计算属性，这是一种很友好和常见的用法，一般当条件多于两个时，都可以使用 data 或 computed ，例如使用计算属性：

<div id="app">
        <div :class="classes"></div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classes: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-fail': this.error && this.error.type === 'fail'
                    }
                }
            }
        })
    </script>

        除了计算属性，也可以直接绑定一个 Object 类型得数据，或者使用类似计算属性的 methods 。

2.2 数组语法

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

    <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>

        也可以使用三元表达式来根据条件切换 class ，例如下面的示例：

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

        样式 error 会始终应用，当数据 isActive 为真时，样式 active 才会被应用。class 有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法：

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

        当然，与对象语法一样，也可以使用 data、computed 和 methods 三种方法，以计算属性为例：

    <div id="app">
        <button :class="classes"></button>
    </div>
    <script>
        var app = new Vue ({
            el: '#app',
            data: {
                size: 'large',
                disabled: true
            },
            computed: {
                classes: function () {
                    return [
                        'btn',
                        {
                            ['btn-' + this.size]: this.size !== '',
                            ['btn-disabled']: this.disabled
                        }
                    ];
                }
            }
        })
    </script>

        示例中的样式 btn 会始终应用，当数据 size 不为空时，会应用样式前缀 btn- ，后加 size 的值；当数据 disabled 为真时，会应用样式 btn-disabled，所以该示例最终渲染的结果为：

<button class="btn btn-large btn-disabled"></button>

        使用计算属性给元素动态设置类名，在业务中经常用到，尤其是在写复用的组件时，所以在开发过程中，如果表达式较长或逻辑复杂，应该尽可能地优先使用计算属性。

三、在组件上使用

        如果直接在组件上使用 class 或 :class ，样式规则会直接应用到这个组件的根元素上，例如声明一个简单的组件：

    Vue.component('my-component', {
        template: '<p class="article">我是个文本</p>'
    });

        然后在调用这个组件时，应用上面的对象语法或数组语法给组件绑定 class ，以对象语法为例：

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

        最终组件渲染后的结果为：

<p class="article active">我是个文本</p>

        这种用法仅适用于自定义组件的最外层是一个根元素，否则会无效，当不满足这种条件或需要给具体的子元素设置类名时，应当使用组件的 props 来传递（这些用法同样适用于绑定内联样式 style 的内容）。

四、绑定内联样式

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

    <div id="app">
        <div :style="{ 'color': color, 'fontSize': fontSize + 'px'}">我是个文本</div>
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                color: 'red',
                fontSize: 14
            }
        })
    </script>

        CSS 属性名称使用驼峰命名 （camelCase）或短横分割命名（kebab-case），渲染后的结果为：

<div style="color: red; font-size: 14px;">红色文本</div>

        大多数情况下，直接写一长串的样式不便于阅读和维护，所以一般写在 data 或 computed 里，以 data 为例改写下面的示例：

    <div id="app">
        <div :style="styles">我是一个红色的文本</div>
    </div>
    <script>
        var app = new Vue ({
            el: "#app",
            data: {
                styles: {
                    color: 'red',
                    fontSize: 14 + 'px'
                }
            }
        })
    </script>

        应用多个样式对象时，可以使用数组语法：

<div :style="[styleA, styleB]">文本</div>

        在实际业务中，:style 的数组语法并不常用，因为往往可以写在一个对象里面；而较为常用的应当时计算属性。

        另外，使用 :style 时，Vue.js 会自动给特殊的 CSS 属性名称增加前缀，比如 transform 。

转载于:https://my.oschina.net/u/3375733/blog/2249881