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>