vue动态绑定样式style和class

1.style动态样式

1.  
   <!-- 常规字符串写法 -->
2.  
   <div class="basic" style="font-size: 40px;">{{name}}</div>
3.  
   <div class="basic" :style="{fontSize: fsize 'px'}">{{name}}</div>
4.  
   <!-- 对象写法 -->
5.  
   <div class="basic" :style="styleObj">{{name}}</div>
6.  
   <!-- 数组写法 -->
7.  
   <div class="basic" :style="[styleObj1,styleObj2]">{{name}}</div>
8.  
   <div class="basic" :style="styleArr">{{name}}</div>

1.  
   data: {
2.  
   name: '尚硅谷',
3.  
   fsize: 40,
4.  
   styleObj: {
5.  
   fontSize: 40 'px',
6.  
   color: 'red',
7.  
   backgroundColor: 'teal'
8.  
   },
9.  
   styleObj1: {
10.  
    fontSize: 40 'px',
11.  
    color: 'red',
12.  
    },
13.  
    styleObj2: {
14.  
    backgroundColor: 'teal'
15.  
    },
16.  
    styleArr: [
17.  
    {
18.  
    fontSize: 40 'px',
19.  
    color: 'red',
20.  
    },
21.  
    {
22.  
    backgroundColor: 'teal'
23.  
    }
24.  
    ]
25.  
    },

2.class动态样式

1.  
   <!-- 字符串写法 -->
2.  
   <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
3.  
   <!-- 数组写法 -->
4.  
   <div class="basic" :class="classArr">{{name}}</div>
5.  
   <!-- 对象写法 -->
6.  
   <div class="basic" :class="classObj">{{name}}</div>

1.  
   data: {
2.  
   name: '尚硅谷',
3.  
   mood: 'normal',
4.  
   classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
5.  
   classObj: {
6.  
   atguigu1: false,
7.  
   atguigu2: false
8.  
   }
9.  
   },

这篇好文章是转载于：编程之路