vue的class与style绑定

这个就是vue官网的例子，只是记录一下熟悉的过程：

一、绑定 HTML Class 

　　（一）、对象语法　

 1 <template>
 2   <div>
 3     <div class="basic" v-bind:class="{ active: isActive,'text-danger': hasError}">样式测试</div>
 4     <div class="basic" v-bind:class="classObject">样式测试</div>
 5   </div>
 6 </template>
 7 <script>
 8     export default {
 9         data(){
10           return {
11             isActive:true,
12             hasError:false,
13             error:true,
14           }
15         },
16         computed:{
17           classObject: function () {
18             return {
19               active: this.isActive,
20               'text-danger': this.error
21             }
22           }
23         }
24     }
25 </script>
26 <style scoped>
27   .basic{
28     width:200px;
29     height:20px;
30     margin-bottom:10px;
31   }
32   .active{
33     background-color: deepskyblue;
34   }
35   .text-danger{
36     color: red;
37   }
38 </style>

　　(二）、数组语法

 1 <template>
 2   <div>
 3     <div class="basic" v-bind:class="[activeClass, errorClass]">样式测试</div>
 4     <div class="basic" v-bind:class="[isActive ? activeClass : '', errorClass]">样式测试</div>
 5     <div class="basic" v-bind:class="[{ active: isAct }, errorClass]">样式测试</div>
 6   </div>
 7 </template>
 8 <script>
 9     export default {
10         data(){
11           return {
12             activeClass:'active',
13             errorClass:'text-danger',
14             isActive:true,//为truthy值时
15             isAct:false,//假值
16           }
17         }
18     }
19 </script>
20 <style scoped>
21   .basic{
22     width:200px;
23     height:20px;
24     margin-bottom:10px;
25   }
26   .active{
27     background-color: deepskyblue;
28   }
29   .text-danger{
30     color: red;
31   }
32 </style>

 

truthy值扩展：https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy

 二、绑定内联样式

　　（一）、对象语法

 1 <template>
 2   <div>
 3     <div class="basic" v-bind:style="{ 'background-color': backColor, fontSize: fontSize + 'px',color: activeColor}">样式测试</div>
 4     <div class="basic" v-bind:style="styleObject">样式测试</div>
 5   </div>
 6 </template>
 7 <script>
 8   export default {
 9     data(){
10       return {
11         backColor:'deepskyblue',
12         activeColor:'red',
13         fontSize:16
14       }
15     },
16     computed:{
17       styleObject() {
18         let style = {};
19         if(this.backColor) {
20           style['background-color'] = this.backColor;
21         }
22         if(this.activeColor) {
23           style.color = this.activeColor;
24         }
25         if(this.fontSize) {
26           style['font-size'] = `${this.fontSize}px`;
27         }
28         return style;
29       }
30       /*styleObject() {
31         return {
32           'background-color':this.backColor,
33           color:this.activeColor,
34           'font-size':`${this.fontSize}px`
35         }
36       }*/
37     }
38   }
39 </script>
40 <style scoped>
41   .basic{
42     width:200px;
43     height:20px;
44     margin-bottom:10px;
45   }
46 </style>

 　　(二)、数组语法

 1 <template>
 2   <div>
 3     <div class="basic" v-bind:style="[colorStyles, fontStyles]">样式测试</div>
 4   </div>
 5 </template>
 6 <script>
 7   export default {
 8     data(){
 9       return {
10         colorStyles:{ 'background-color': 'deepskyblue',color: 'red'},
11         fontWeight:'bold',
12         fontSize:15
13       }
14     },
15     computed:{
16       fontStyles() {
17         let style = {};
18         if(this.fontSize) {
19           style['font-size'] = `${this.fontSize}px`;
20         }
21         if(this.fontWeight){
22           style['font-weight'] = this.fontWeight;
23         }
24         return style;
25       }
26       /*fontStyles() {
27         return {
28           'font-size':`${this.fontSize}px`,
29           'font-weight':this.fontWeight
30         }
31       }*/
32     }
33   }
34 </script>
35 <style scoped>
36   .basic{
37     width:200px;
38     height:20px;
39     margin-bottom:10px;
40   }
41 </style>

posted @ 2019-11-06 19:17  lhjfly  阅读(195)  评论(0)  编辑  收藏  举报