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 )分割来命名