Vue属性绑定 ---Class 与 Style 绑定

先写style样式:

<style type="text/css">
    .red {
        color: red;
    }
    .fwThin {
        font-weight: 300;
    }
    .active {
        letter-spacing: 0.5em;
    }
    .italic {
        font-style: italic;
    }
</style>

Class绑定: 4种方法:

第1种 : (数组的形式 ): 直接传递一个数组, 注意: 这里的 class 需要使用 v-bind 做数据绑定
注:: :class 数组中的red和fwThin 是<style></style> 里边的.red 和 .fwThin

    <h1 :class="['red','fwThin']">v-bind绑定class样式</h1>

第2种 : 在数组中绑定三元表达式

    <h1 :class="['red','fwThin',flag?'active':'']">v-bind  在数组中绑定三元表达式</h1>

第3种 : 在数组中使用 对象 来代替 三元表达式, 提高代码的可读性

    <h1 :class="['red','fwThin',{'active':flag}]">v-bind  在数组中使用对象 来代替三元表达式</h1>

第4种 : class 使用 v-bind 绑定对象的时候 , 对象的属性名是类名 , 由于 对象的属性 可带引号 , 也可不带引号 , 所以这里 没带引号, 属性的值 : 是一个标识符

    <h1 :class="{red:true,fwThin:false,active:true,italic:true}">v-bind  在数组中使用对象 来代替三元表达式</h1>
    <!--也可以 定义到data中 , 然后引用到  :class里  如下:-->
    <h1 :class="classObj">v-bind  在数组中使用对象 来代替三元表达式</h1>    


    <!-- 上面四种方法对应的 js 看这里: -->
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                flag:true,
                classObj:{red:true,fwThin:false,active:true,italic:true}
            },
            methods: {}
        })
    </script>

Style绑定: 3种方法:

第1种 : 直接在元素上通过 :style 的形式, 书写样式对象(对象就是无序键值对的集合)

    <h3 :style="{color:'red','font-weight':200}">属性绑定样式 ----style</h3>

第2种 : 将样式对象, 定义到data中 , 然后引用到 :style 里

    <h3 :style="styleObj">属性绑定样式 ----style,定义到data里面了</h3>

第3种 : 在 :style 中通过数组 , 引用多个data上的样式对象

    <h3 :style="[styleObj, styleObj2]">属性绑定样式 ----style, 通过多个数组定义</h3>

     <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                styleObj:{color:'red','font-weight':200},
                styleObj2:{'font-style':'italic'}
            },
            methods: {}
        })
    </script>

转载于:https://www.jianshu.com/p/b8c521b87ca2