绑定class、style内联

对象语法：

• 绑定class对象语法：对象的键是类名，值是布尔值

<!--html-->
<button :class="{bgColor : isRed,bg2 : isPink}" @click="change">点我换颜色</button>

//vue.js
var app = new Vue({
            el: '#root',
            data: {
                isRed: true,
                isPink: false
            },
            methods: {
                change: function(){
                    if(this.isRed)  {
                        this.isRed = false
                        this.isPink = true
                    }else{
                        this.isRed = true
                        this.isPink = false
                    }
                    
                }
            }
        })

• 绑定内联style：键是style属性名，值是对应的值
  注意在vue中style要用驼峰命名或者加中横线 -

<!--html-->
<div id="root">
        <div :style="{'color':color,'fontSize':fontSize + 'px'}">1234565</div>
    </div>

//vue.js
var app = new Vue({
            el: '#root',
            data: {
                color: 'pink',
                fontSize: 18
            }
        })

数组语法：

• 绑定class数组语法：值对应的是类名

<!--html-->
<div :class="[style1,style2]">数组语法</div>

//vue.js
var app = new Vue({
            el: '#root',
            data: {
                style1: 'style1',
                style2: 'style2'
            }
})

/*css*/
.style1 {
    font-size: 20px;
}
.style2 {
    color: yellowgreen;
}

• style内联样式数组语法：值对应类名，在data中定义样式

<!--html-->
    <div id="root">
        <div :style ="[style1,style2]">数组</div>
    </div>

//vue.js
var app = new Vue({
            el: '#root',
            data: {
                style1: {
                    color: 'yellowgreen',
                    fontSize: 18 + 'px'
                },
                style2: {
                    backgroundColor: '#ccc',
                }
            },
        })