vue入门：（class与style绑定）

• 对象语法
• 数组语法

 一、对象语法

1.1对象语法绑定HTML Class

语法：v-bind:class="{'className1':boolean1,'className2':boolean2}"

<style>
    div{
        width: 100px;
        height: 100px;
    }
    .class1{
        background-color: #ff0;
    }
    .class2{
        background-color:#f00;
    }
</style>

<div id="example" v-bind:class="{'class1':yellow,'class2':red}" v-on:click="changeColor"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            yellow:true,
            red:false
        },
        methods:{
            changeColor(){
                this.yellow = !this.yellow;
                this.red = !this.red;
            }
        }
    });
</script>

当点击div时，触发changeColor方法，数据的值发生变化时，class行间属性会被切换，下面时触发效果：

当你看到v-bind:class="{'class1':yellow,'class2':red}"这句代码是不是就想到了直接使用一个对象替代这个键值对的写法，这当然是可以的：

<div id="example" v-bind:class="colorName" v-on:click="changeColor"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            colorName:{
                class1:true,
                class2:false
            }
        },
        methods:{
            changeColor(){
                this.colorName.class1 = !this.colorName.class1;
                this.colorName.class2 = !this.colorName.class2;
            }
        }
    });
</script>

这两种写法前一种是空间复杂度大一点，后一种是时间复杂度大一点，怎么应用看具体需求吧。

1.2对象语法绑定HTML Style

语法：v-bind:style="{styleProp1:value1,styleProp2:value2}"

将样式属性名和属性值以键值对的形式写入对象，属性名采用驼峰书写模式。

<div id="example" v-bind:style="{width:widthVal,height:heightVal,backgroundColor:backColorVal}" v-on:click="changeColor"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            widthVal:'100px',
            heightVal:'100px',
            backColorVal:'#ff0'
        },
        methods:{
            changeColor(){
                this.backColorVal = this.backColorVal == '#ff0' ? '#f00' : '#ff0';
            }
        }
    });
</script>

实现的效果与HTML Class对象语法实现的一样，HTML Style对象语法表达式转换成类名的方式就不展示了。

 二、数组语法

 2.1数组语法绑定HTML Class

语法：v-bind:class="[classNameKey1,classNameKey2]"

（样式参考示例1.1的样式）

<div id="example" v-bind:class="[class1,class2]" v-on:click="changeColor"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            class1:'class1',
            class2:''
        },
        methods:{
            changeColor(){
                this.class1 = this.class1 == '' ? 'class1' : '';
                this.class2 = this.class2 == '' ? 'class2' : '';
            }
        }
    });
</script>

2.2数组语法实现HTML Style绑定

语法：v-bind:style="[styleObje1,styleObje2]"

<div id="example" v-bind:style="[didiFamily, styleColo]" v-on:click="changeColor" ref="example"></div>
<script>
    var vm = new Vue({
        el:"#example",
        data:{
            didiFamily:{
                width:'100px',
                height:'100px'
            },
            styleColo:{
                backgroundColor:'#ff0'
            }
        },
        methods:{
            changeColor(){
                return this.styleColo.backgroundColor = this.styleColo.backgroundColor == '#ff0' ? '#f00' : '#ff0';
            }
        }
    });
</script>