3vue class样式设置，styleclass绑定四种方式数组三元表达式数组中嵌套对象直接使用对象数组用类必须要用‘

class绑定四种方式

数组

     <h1 :class="['red']" >这是一个很大的h1</h1>

三元表达式

      //在data上定义flag:true
      <h1 :class="[flag?'active':'']">这是一个很大的h1</h1>

数组中嵌套对象

      <h1 :class="['red','thin',{'active':flag}]">这是一个很大的h2</h1>

直接使用对象

   <h1 :class="{active:true,red:true}">对象写入方法</h1>

数组用类必须要用‘’引起来，多种类用，隔开

  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
          .red {
              color: red;
          }
  
          .thin {
              font-weight: 200;
          }
  
          .italic {
              font-style: italic;
          }
  
          .active {
              /* 中文字符间距 */
              letter-spacing: 0.5em;
          }
      </style>
      <script src="./lib/vue.js"></script>
  </head>
  
  <body>
      <div id="app">
          <!-- 数组形式 无优点-->
          <h1 :class="['red']">这是一个很大的h1</h1>
          <h1 :class="['thin']">这是一个很大的h1</h1>
          <h1 :class="['red','thin']">这是一个很大的h1</h1>
          <!-- 三元表达式 代码量多 -->
          <h1 :class="['red','thin',flag?'active':'']">这是一个很大的h1</h1>
          <!-- 数组中写入对象 代替三元表达式，提高代码可读性   属性和值   {'active':flag} -->
          <h1 :class="['red','thin',{'active':flag}]">这是一个很大的h2</h1>
            <!-- 类名和值true还是false ，对象属性是类名，带不带引号都可以，属性值是标识符 -->
            <h1 :class="{active:true,red:true}">对象写入方法</h1>
            <h1 :class="classobj">是一个对象可以这样写入</h1>
  
      </div>
      <!--  -->
      <script>
          var vm = new Vue({
              el: "#app",
              data: { 
                  flag:true, 
                  classobj: {active:true,red:true}
              }
          })
      </script>
  </body>
  
  </html>

style绑定三种方式

直接绑定传对象，无需键值对的集合，属性名有-称需要有引号

   <h1 :style="{color:'red' ,'font-size':'13px'}">这是一个很大的h1</h1>

可以直接把对象提取出来，在data上定义

      <h1 :style="styleobj">这是一个很大的h1</h1>  
       data: {   
          styleobj: {color:'red','font-size':'13px'} 
      }

引入多个对象用数组的方式

   <h1 :style="[styleobj,styleobj2]">这是一个很大的h1</h1>  
   data: {  
              styleobj: {color:'red','font-size':'13px'},
                styleobj2:{'font-style':'italic'}
              }

举例子

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
            <script src="./lib/vue.js"></script>
        </head>
        
        <body>
            <div id="app">
                 <!--传对象，无需键值对的集合  -->
                <h1 :style="{color:'red','font-size':'13px'}">这是一个很大的h1</h1> 
                <h1 :style="styleobj">这是一个很大的h1</h1>  
                <!-- 用数组的方式放入 -->
                <h1 :style="[styleobj,styleobj2]">这是一个很大的h1</h1>  
            </div>
            <!--  -->
            <script>
                var vm = new Vue({
                    el: "#app",
                    data: {  
                        styleobj: {color:'red','font-size':'13px'},
                        styleobj2:{'font-style':'italic'}
                    }
                })
            </script>
        </body>
        
        </html>