vue入门:(class与style绑定)
- 对象语法
- 数组语法
一、对象语法
1.1对象语法绑定HTML Class
语法:v-bind:class="{'className1':boolean1,'className2':boolean2}"
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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>
——生命自会找到蓬勃之路。