vue.js初级入门之v-bind的class

v-bind用于绑定html标签属性。但是，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

一、对象语法

1.匿名对象：直接在html指定boolean变量名，在data中对变量赋值

    
    <div id="simple">
        <div class="box" v-bind:class={bkg_red:isRed,font_blue:isBlue}>匿名对象div>    
    div>
    <script>
        var simple = new Vue({
            el:"#simple",
            data:{
                isRed:true,
                isBlue:false,
            }
        })
    script>

2.引用对象名：html中只指定了对象名，data中对对象的具体属性进行赋值

    <div id="objectName">
        <div class="box" v-bind:class="classObject">引用对象名div>    
    div>
    <script>
        var simple = new Vue({
            el:"#objectName",
            data:{
                classObject:{
                    bkg_red:true,
                    font_blue:false,
                },
            }
        })
    script>

3.使用计算属性：类似2，不同的是，对象中变量的值可通过其他变量运算得出

  <div id="computedClass">
      <div class="box" v-bind:class="computedClass">引用计算属性computeddiv>    
  div>
  <script>
      var computedClass = new Vue({
          el:"#computedClass",
          data:{
              isRed:true,
              isBlue:false,
              error:null
          },
          computed:{
              computedClass:function () {
                  return {
                      bkg_red:this.isRed && !this.error,
                      font_blue:this.isBlue && !this.error
                  }
              }
          }
      })
  script>

总结：从1到3，结构上趋向封装，赋值方式趋向丰富

二、数组语法

    
  <div id="arrayClass">
      <div class="box" v-bind:class="[bkgClass,fontClass]">引用计算属性computeddiv>    
  div>
  <script>
      var computedClass = new Vue({
          el:"#arrayClass",
          data:{
              bkgClass:'bkg_red',//数组的键值对赋值，key键为虚拟dom中class的绑定数值，value值为实际dom中的class名
              fontClass:'font_blue',
          },
      })
  script>

渲染为:

我还是比较喜欢对象语法