vue动态绑定class

在vue框架开发中，有时候我们需要对元素的样式进行动态控制，比如tab按钮的切换。我们可以通过vue指令v-bind对元素的class进行动态控制。控制方式有对象和数组两种。

class的css样式如下：

  .success {
    color:green;
    width:300px;
    height:50px;
  }
  .error {
    color:red;
  }
  .backgroundStyle {
    background:yellow
  }

一、对象方式

1. 普通对象方式

    
   普通对象方式 !

   let isSuccess = ref(true)

2. 通过判断条件确定对象样式

   //template中
   hello world !
    
   //script标签中
   let aStyle = ref("astyle")
     let a = ref("astyle")

3. 可以控制多个

   hello world !
    
   
   let addBackground = ref(true)
   let isSuccess = ref(true)

    

4.  在script标签中定义对象

   在script中控制!
    
   
   
   const  classObj = reactive({success:true,backgroundStyle:true})
   

 二、数组方式

1. 基本用法

   数组方式的基本用法!
    
   
   let success = ref("success")
   let backgroundStyle = ref ("backgroundStyle")
   
   

2.  三元运算符

   数组方式三元运算符!
    
   
   
   let isSuccess = ref(true)
   

3. 数组对象结合

   数组对象结合!
    
   
   
   let isSuccess = ref(true)

   需要注意一点，这种方式对象里面的class类名可以省去‘’号