10.Vue Class绑定

Vue.js的Class绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

对象语法

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

{{msg}}

上面的语法表示 mydiv 这个 class 存在与否将取决于数据属性 flag 的 值。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板：

{{msg}}

和如下 data：

 data:{
      msg:"hello liqinggang",
      flag: true,
      hasBorder:true,
}

详细代码如下：

    
    
    



    
    
{{msg}}