绑定样式--class样式（字符串法、对象法、数组法）、style样式（直接绑定法、对象法、数组法）

绑定样式

    1.class样式

          写法：class=“xxx”   xxx可以使字符串、对象、数组

             字符串法：适用于类名不确定，要动态获取

             对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用 

             数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用

   2.style样式

        ：style=“{fontSize：xxx}”  其中xxx是动态值

        ：style="[a,b]"  其中ab是样式对象，如下

 

 

目录

一、绑定class样式

 1.绑定class样式--字符串写法

 2.绑定class样式--数组写法

 3. 绑定class样式--对象写法

4.最终代码 案例：单击div实现变换心情（sad、normal、happy）

二、绑定style样式

        1.方法一直接绑定法

        2.方法二对象法

---

一、绑定class样式

 1.绑定class样式--字符串写法

 
{{name}}

   单击之后，下面这个框会随意变动

 

 

 

 2.绑定class样式--数组写法

     适用于绑定的样式个数不确定，名字也不确定

{{name}}

  下面这个一下次用了三个样式

 

 3. 绑定class样式--对象写法

适用于绑定的样式个数确定，名字也确定，但要动态决定用不用 

{{name}}

        data:{
            name:'尚硅谷',
            mood:'normal',
            classArr:['sad','normal','happy'],
            classObj:{
                atguigu1:false,
                atguigu2:false
            }
        },
        methods: {
            changeMood(){
            
            const arr=['sad','normal','happy']
            // 现在只有0,1,2 这三个数
            this.mood=arr[Math.floor(Math.random()*3)]
            }
        },

        })

在右侧root中进行修改  

 

4.最终代码 案例：单击div实现变换心情（sad、normal、happy）

    
        
        
        
         
        
    
    
        

            
           
          
           
{{name}}
           

           

        
        
{{name}}

         
         
{{name}}

        
          

       
    
       

二、绑定style样式

        1.方法一直接绑定法

 
{{name}}

        data:{
            fsize:40,
            name:'尚硅谷',
           }

 

        2.方法二对象法

{{name}}

        data:{
            styleObj:{
                // fontsize是css样式中真实存在的
                // 我们这个地方直接给一个值就好了
                fontSize:'40px'
            },
           
            name:'尚硅谷',
         }