3. vue中的class和style的動態綁定

1. 動態綁定class

  * 對象方式處理
    1. 直接寫在結構上
       * 語法 -- :class = " { 樣式類名，響應式數據 } "  當響應式數據為TRUE的時候，才會有這個樣式
       * 例子：`
               <div 
                class="test"
                :class="{ active: isActive }"
              >
              Ananiah
              </div>

              data() {
                return {
                  isActive: true
                };
              },
              // 渲染dom 結果
              <div class="test active"> Ananiah </div>
              `
       * 注意 -- v-bind:class 指令也可以與普通的class共存
    2. 寫在響應式數據中
        * 語法 -- :class = " 響應數據(對象) "
        * 例子：` <div 
                    class="test"
                    :class="{ active: isActive }"
                  >
                  Ananiah
                  </div>

                  data() {
                    return {
                      classObj: {
                        active: true,
                        'text-danger': true
                      }
                    };
                  },
                  `
        * 渲染結果： <div class="active text-danger"> Ananiah </div>
     3. 寫在計算屬性中
        * 語法 -- :class=" 返回的是對象的計算屬性 "
        * 例子：
              `
              <div
              :class="classObject"
              >
              Ananiah
              </div>

              computed: {
                classObject: function() {
                  return {
                    active: this.isActive && !this.error
                  }
                }
              },
              `
    * 數組控制樣式類
      1. 語法 -- :class=" [ 響應式數據1, ... ] "  -- 控制響應式數據的值是對應的樣式類或者沒有值，來控制是否有這個樣式
      2. 例子 -- `
                <div
                :class="[ activeClass, errorClass ]"
                >
                Ananiah
                </div>

                data() {
                  return {
                    activeClass: "active",
                    errorClass: "text-danger"
                  };
                },
                `        
      3. 渲染結果：<div class="active text-danger"> Ananiah </div>
      4. 注意：
         * 1. 如果想根據條件切換列表中的class，可以用三元表達式  <div :class="[ active ? isActive : active ]"> Ananiah </div>
         * 2. 在數組語法中也可以使用對象語法   <div :class="[ { active: isActive }, errorClass ]"> Ananiah </div>

控制style樣式

* 與控制動態class類名基本一致
* 注意 -- 可以用駝峰式( camelCase )或者短橫線( kebab-case )分割來命名