vue6.class和style的绑定

---

本文使用到的样式

<style>
        .static {
            color: red;
        }
        .active {
            color: blue;
        }
        .text-danger {
            color: yellow;
        }
        .isActive {
            color: blue;
        }
        .activeClass {
            color: blue;
        }
        .errorClass {
            color: yellow;
        }
    </style>

---

绑定Class

对象语法

<h2>对象语法</h2>
    <div
            id="app1"
            class="static"
            v-bind:class="{ 'active': isActive, 'text-danger': hasError }"
    >文字样式</div>
    <script>
        var app1 = new Vue({
            el: '#app1',
            data: {
                isActive: true,
                hasError: false
            }
        });
    </script>
    <hr>
    <h2>Class与Style绑定将绑定的对象不必内联定义在模板里</h2>
    <div
            id="app2"
            class="static"
            v-bind:class="classObject"
    >文字样式</div>
    <script>
        var app2 = new Vue({
            el: '#app2',
            data: {
                classObject: {
                    isActive: true,
                    hasError: false
                }
            }
        });
    </script>
    <hr>
    <h2>Class与Style绑定将绑定的对象不必内联定义在模板里,同时绑定一个返回对象的计算属性</h2>
    <div
            id="app3"
            class="static"
            v-bind:class="classObject"
    >文字样式</div>
    <script>
        var app3 = new Vue({
            el: '#app3',
            data: {
                isActive: true,
                error: null
            },
            computed: {
                classObject: function () {
                    return {
                        active: this.isActive && !this.error,
                        'text-danger': this.error
                        // this.error.type === 'fatal'????
                    }
                }
            }
        });
    </script>
    <hr>

---

数组语法

<h2>数组语法</h2>
    <div id="app4" v-bind:class="[activeClass, errorClass]">文字样式</div>
    <script>
        var app4 = new Vue({
            el: '#app4',
            data: {
                activeClass: "active",
                errorClass: 'text-danger'
            }
        });
    </script>
    <hr>
    <h2>根据条件切换列表中的class,可以用三元表达式</h2>
    <div id="app5" v-bind:class="[ static, isActive ? activeClass : errorClass]">文字样式</div>
    <script>
        var app5 = new Vue({
            el: '#app5',
            data: {
                isActive: true,
                static: 'static',
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        });
    </script>
    <hr>
    <h2>数组中使用对象语法</h2>
    <div id="app6" v-bind:class="[static, {active: isActive}]">文字样式</div>
    <script>
        var app6 = new Vue({
            el: '#app6',
            data: {
                isActive: true,
                static: 'static',
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        });
    </script>
    <hr>
    <h2>用在组件上</h2>
    <p>当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。</p>
    <p style="color: red;">千万注意,要是用vue自定义的组件,必须有vue实例,如果没有,html当它是普通标签</p>
    <!--使用它-->
    <div id="app7">
        <my-component class="baz boo"></my-component>
        <my-component v-bind:class="{ active: isActive }"></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            template: '<p class="foo bar">Hi</p>'
        });
        var app7 = new Vue({
            el: '#app7',
            data: {
                isActive: true
            }
        });
    </script>

---

绑定style

对象语法

<div id="app8" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">test</div>
    <script>
        var app8 = new Vue({
            el: '#app8',
            data: {
                activeColor: 'skyblue',
                fontSize: 88
            }
        });
    </script>

    <hr>
    <h2>绑定内联样式直接绑定到样式对象</h2>
    <div id="app9" v-bind:style="styleObj">test</div>
    <script>
        var app9 = new Vue({
            el: '#app9',
            data: {
                styleObj: {
                    color: "skyblue",
                    fontSize: "88px"
                }
            }
        });
    </script>
    <hr>

---

数组语法

<h2>数组语法</h2>
    <div id="app10" v-bind:style="[baseStyles, overridingStyles]">绑定style数组语法</div>
    <script>
        var  app10 = new Vue({
            el: '#app10',
            data: {
                baseStyles: {
                    color: "green"
                },
                overridingStyles: {
                    fontSize: "50px"
                }
            }
        });
    </script>
    <hr>
    <h2>多重值</h2>
    <p>从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：</p>
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
    <p>这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。</p>

---