vue入门：（class与style绑定）

对象语法
数组语法

一、对象语法

1.1对象语法绑定HTML Class

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

 1 <style>
 2     div{
 3         width: 100px;
 4         height: 100px;
 5     }
 6     .class1{
 7         background-color: #ff0;
 8     }
 9     .class2{
10         background-color:#f00;
11     }
12 </style>

示例参考样式

 1 <div id="example" v-bind:class="{'class1':yellow,'class2':red}" v-on:click="changeColor"></div>
 2 <script>
 3     var vm = new Vue({
 4         el:"#example",
 5         data:{
 6             yellow:true,
 7             red:false
 8         },
 9         methods:{
10             changeColor(){
11                 this.yellow = !this.yellow;
12                 this.red = !this.red;
13             }
14         }
15     });
16 </script>

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

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

 1 <div id="example" v-bind:class="colorName" v-on:click="changeColor"></div>
 2 <script>
 3     var vm = new Vue({
 4         el:"#example",
 5         data:{
 6             colorName:{
 7                 class1:true,
 8                 class2:false
 9             }
10         },
11         methods:{
12             changeColor(){
13                 this.colorName.class1 = !this.colorName.class1;
14                 this.colorName.class2 = !this.colorName.class2;
15             }
16         }
17     });
18 </script>

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

1.2对象语法绑定HTML Style

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

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

 1 <div id="example" v-bind:style="{widthVal,height:heightVal,backgroundColor:backColorVal}" v-on:click="changeColor"></div>
 2 <script>
 3     var vm = new Vue({
 4         el:"#example",
 5         data:{
 6             widthVal:'100px',
 7             heightVal:'100px',
 8             backColorVal:'#ff0'
 9         },
10         methods:{
11             changeColor(){
12                 this.backColorVal = this.backColorVal == '#ff0' ? '#f00' : '#ff0';
13             }
14         }
15     });
16 </script>

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

二、数组语法

2.1数组语法绑定HTML Class

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

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

 1 <div id="example" v-bind:class="[class1,class2]" v-on:click="changeColor"></div>
 2 <script>
 3     var vm = new Vue({
 4         el:"#example",
 5         data:{
 6             class1:'class1',
 7             class2:''
 8         },
 9         methods:{
10             changeColor(){
11                 this.class1 = this.class1 == '' ? 'class1' : '';
12                 this.class2 = this.class2 == '' ? 'class2' : '';
13             }
14         }
15     });
16 </script>

2.2数组语法实现HTML Style绑定

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

 1 <div id="example" v-bind:style="[didiFamily, styleColo]" v-on:click="changeColor" ref="example"></div>
 2 <script>
 3     var vm = new Vue({
 4         el:"#example",
 5         data:{
 6             didiFamily:{
 7                 '100px',
 8                 height:'100px'
 9             },
10             styleColo:{
11                 backgroundColor:'#ff0'
12             }
13         },
14         methods:{
15             changeColor(){
16                 return this.styleColo.backgroundColor = this.styleColo.backgroundColor == '#ff0' ? '#f00' : '#ff0';
17             }
18         }
19     });
20 </script>