class绑定

• 对象语法

  根据条件判断是否添加该class

  <div id="app" :class="{fontColor:isClass}">123</div>
  

  .fontColor{
      color: red;
  }
  

  var vm = new Vue({
      el: '#app',
      data: {
          isClass:true
      },
  })
  

• 数组语法

  传数组以应用一个 class 列表

  <div id="app" :class="[fontClass,divClass]">123</div>
  

  var vm = new Vue({
      el: '#app',
      data: {
          fontClass:'baseFont',
          divClass:'baseDiv'
      },
  })
  

    .baseFont{
        font-size: 40px;
        font-weight: 700;
        color: brown;
    }
    .baseDiv{
        display: block;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
  

• 三元表达式

  根据条件决定是否添加该class

  <div id="app" :class="[isFont?fontClass:'',divClass]">123</div>
  

  var vm = new Vue({
      el: '#app',
      data: {
          isFont:false,
          fontClass:"baseFont",
          divClass:"baseDiv"
      },
  })
  

  也可以用对象语法写，会更清晰。此时baseFont不是变量，而是类名

  <div id="app" :class="[{baseFont:isFont},divClass]">123</div>
  

style绑定

• 对象语法

  与css相似

  <div id="app" :style="{color:baseColor,fontSize:baseSize}">123</div>
  

  var vm = new Vue({
      el: '#app',
      data: {
          baseColor:'red',
          baseSize:'40px'
      },
  })
  

  你也可以在直接绑定到一个样式对象，会更清晰

  <div id="app" :style="baseFont">123</div>
  

  var vm = new Vue({
      el: '#app',
      data: {
          baseFont:{
             color:'red',
             fontSize:'40px'
          }
      },
  })
  

• 数组语法

  将多个样式对象应用到同一个元素上

  <div id="app" :style="[baseFont,basediv]">123</div>
  

  var vm = new Vue({
      el: '#app',
      data: {
          baseFont:{
             color:'red',
             fontSize:'40px'
          },
          basediv:{
              display:'block',
              width:'100px',
              height:'100px',
              backgroundColor:'green'
          }
      },
  })