Vue学习的第五天

Class与Style绑定

---

操作元素的class列表和内联样式是数据绑定的一个常见需求。因为他们都是属性，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。v-bind用于class和style时，表达式结果类型除了字符串外还可以是对象或数组。

对象语法

可以给v-bind:class一个对象，以动态地切换class

//active这个class存在与否将取决于数据属性isActive的Boolean值，可以在对象中传入多个属性来动态切换多个class。v-bind:class指令也可以与普通的class属性共存

var vm = new Vue({

    el:"#app",

    data:{

        isActive:true,

        hasError:false

   }

})

绑定的数据对象不必内联定义在模板里

var vm = new Vue({

    el:"#app-1",

    data:{

        classObject:{

            active:true,

            "text-danger":false

        }

    }

})

也可以绑定一个返回对象的计算属性.

var vm = new Vue({

      el:"#app",

      data:{

           isActive:true,

           error:null

       },

       computed:{

               classObject:function(){

                      return {

                           active:this.isActive && !this.error,

                           "text-danger":this.error && this.error.type === "fatal"

                       }

               }

        }

})

#数组语法

---

我们可以把一个数组传给v-bind:class 以应用一个class列表

var vm = new Vue({

      el:"#app-1",

      data:{

            activeClass:"active",

            errorClass:"text-danger"

      }

})

渲染为

如果向根据条件切换列表中的class,可以用三元表达式

这样写将始终添加errorClass 但是只有在isActive 是true时才添加activeClass

不过,当有多个条件class时这样写有些繁琐,所以在数组语法中也可以使用对象语法:

#用在组件上

---

当在一个自定义的组件上使用class属性时,这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖

Vue.component('my-component',{

    template:'

'

})

HTML将被渲染为

对于带数据绑定class也同样适用

当isActive为true时 HTML将被渲染为

绑定内联样式

---

v-bind:style 的对象语法看着非常像css，但其实就是一个JavaScript对象

var vm = new Vue({

    el:"#app",

    data:{

         activeColor:'red',

         fontSize:30

    }

})

直接绑定到一个样式通常更好

var vm = new Vue({

     el:"#app-1",

    data:{

          styleObject:{

                color:"red",

                fontSize:"13px"

         }

    }

})