vue入门：（class与style绑定）

Posted 2022-01-12 zheoneandonly

• 对象语法
• 数组语法

 一、对象语法

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="width: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                 width:‘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>