Vue.js 样式绑定

1.class 属性绑定

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

:class="{‘属性名’：‘属性值’}" 属性名就是生效的类名 值为布尔值，true生效，false不生效
直接绑定一个对象 :class=“aa” aa 是data中的一个属性： aa:{“blue”:true,“big”:false}
也可以通过计算属性返回一个对象。

<div id="app">
        <!-- 对象语法 -->
        <p :class="{green:isGreen,big:isBig}">hanpy new Year</p> 
         <p :class="aa">hanpy new Year</p> 
        <p :class="bb">hanpy new Year</p> 
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isGreen:true,
                isBig:true,
                age: 20,
                aa: {
                    "red": true,
                    "big": false
                },
                myColor_blue: "bc_blue",
                myColor_red: "red",
                myColor_green: "green",
                mySize: "big"


            },
            methods: {

            },
            computed: {
                bb() {
                    return {
                        "green": this.age > 18,
                        "big": true
                    }
                }
            }
        })
    </script>

2.Vue.js style(内联样式)

1.在行内属性中书写样式

  <div style="color: red; font-size: 48px;">我是div</div>

2.外部增加{};属性值改造成字符串：分高改造成逗号；属性名到对象名的改变

  <div v-bind:style="{color:'red' ,fontSize:'48px'}">我是div</div>

3.把属性值改成变量,第一个color是样式名；第二个color是变量名，和data中的变量保持一致.

    <div v-bind:style="{color:color,fontsize:size}">我是div</div >