vue动态绑定class

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

class的css样式如下：

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

一、对象方式

1. 普通对象方式

    <h1 :class="{'success':isSuccess}">普通对象方式 !</h1>

   let isSuccess = ref(true)

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

   //template中
   <h1 :class="{'success':aStyle==a}">hello world !</h1> <!-- aStyle与a相同success生效 -->
   //script标签中
   let aStyle = ref("astyle")
     let a = ref("astyle")

3. 可以控制多个

   <h1 :class="{'success':isSuccess,'backgroundStyle':addBackground}">hello world !</h1> <!-- 可以控制多个 -->
   
   let addBackground = ref(true)
   let isSuccess = ref(true)

    

4.  在script标签中定义对象

   <h1 :class="classObj">在script中控制!</h1> <!-- 可以在script中控制 -->
   
   
   const  classObj = reactive({success:true,backgroundStyle:true})
   

 二、数组方式

1. 基本用法

   <h1 :class="[success,backgroundStyle]">数组方式的基本用法!</h1> <!-- 数组用法的基本放方式 -->
   
   let success = ref("success")
   let backgroundStyle = ref ("backgroundStyle")
   
   

2.  三元运算符

   <h1 :class="[isSuccess?'success':'error']">数组方式三元运算符!</h1> <!-- 数组三元运算符方式 -->
   
   
   let isSuccess = ref(true)
   

3. 数组对象结合

   <h1 :class="[{success:isSuccess},'backgroundStyle']">数组对象结合!</h1> <!-- 数组与对象结合，前面对象里的第一个参数可以不带引号 -->
   
   
   let isSuccess = ref(true)

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