Vue动态绑定样式

对于vue.js动态绑定class样式，看了一些网上的帖子发现整理的都不太完整，特地好好整理了一下，由于都在学习中，有啥疑问、问题欢迎指正，一起来学习吧。

由于3种Vue动态绑定样式测试所需要的css代码都是重复的，我们就把他提炼出来

css代码：

	.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px solid red;;
				background-color: rgba(255, 255, 0, 0.644);
				background: linear-gradient(30deg,yellow,pink,orange,yellow);
			}
			.sad{
				border: 4px dashed rgb(2, 197, 2);
				background-color: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}

第一种情况: 适用于样式的类名不确定，需要动态的指定

代码如下:

    
     
     


    

                     
  
{{name}}
  
    
    
    

1.可以发现我们并没有去操作dom,只是把Vue维护的数据mood改了，Vue帮我操作了这里的流程

2.正常的样式正常写，绑定的样式，变化的样式绑定的形式写(v-bind)

3.效果图

  点击该div盒子变化

 4.第一种写法也叫字符串写法(你所填写的样式要变也是换个'happy','sad'之类的字符串)

 第二种情况: 绑定样式_数组写法,适用于绑定的样式，个数都不确定。

    
    
    
    
     
     


    

                      
      

      
{{name}}




    
     

 1.效果图:(加上的边框，文字阴影等样式)

2.可以发现第二种数组写法，动态绑定样式数组里面可以很方便的添加多个样式，所以样式的数量和类名都不确定,因为类名也是很方便的可以以数组元素的形式加进数组当中完成样式的动态绑定。

第三中情况:对象写法(绑定样式的类名与数量都确定，但是否决定挂载运用)

     
     


    

                      
  

      
      
      
      
{{name}}



 
                                                       

    
     

1.效果图:

2.以对象的形式动态绑定样式:

 new Vue({

            el:'#root',

            data:{

                name:"尚硅谷",

                mood:'normal',

                classObj:{

                  atguigu1:true,

                  atguigu2:true,

                  atguigu3:true,

                  sad:true

                }

            },

        })

3.这样我们可以很方便的更改data中classObj对象中属性的布尔值，是否动态的绑定class样式

true即为动态绑定该样式,false即为没有动态绑定该样式

通过以上学习我们可以基本掌握vue.js的动态绑定了吧