Vue （十二）样式属性

样式绑定方式

1.class 形式

写法：class="xxx" xxx可以是字符串、对象、数组

1. 字符串写法：类名不确定需要动态指定

2. 数组写法：绑定的样式个数不确定、名字也不确定

vm.classArr.shift(） 移除数组中首位元素
vm.classArr.push('xxx') 向数组中添加 xxx 元素，即可以通过push()新增样式

3. 对象写法：绑定多个样式，个数确定、名字也确定，单需要动态决定用不用

vm.classObj.sad=false 
vm.classObj.sad=true
通过修改对象的属性是否为真，来动态决定是否使用该样式

2.class 固定写法和动态写法区分

4. class="xxx" 用来指定固定的样式

比如： class="basic"

5. :class="xxx"用来绑定动态的样式，可以在data、method里被使用

比如： 

标签中使用:class="a"
  data:{ a: 'basic'}
 这里相当于:class动态的通过a绑定了样式 basic.

3.style样式

6. 对象写法 

:style="{fontSize: xxx}"其中xxx是动态值

7. 数组写法 

:style="[a,b]"其中a、b是样式对象

Class案例

1.样式

2.class样式绑定

    
    
    

        
        
        
{{name}}
        

        
        
{{name}}
        

        
        
{{name}}
    

    

Style案例

    
    
{{name}}
    
    
{{name}}

            data: {
                name:'尚硅谷',
                mood:'normal',
                classArr:['atguigu1','atguigu2','atguigu3'],
                classObj:{
                    atguigu1:false,
                    atguigu2:false,
                    atguigu3:true,
                    sad:true
                },
                styleObj:{
                    fontSize: '40px',
                    backgroundColor: 'yellow'
                },
                styleObj2:{
                    backgroundColor:'orange'
                },
                styleArr:[
                    {
                        fontSize: '40px',
                        color: 'blue',
                    },
                    {
                        backgroundColor:'gray'
                    }
                ]
             },