Vue样式绑定

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

  • Class绑定
  • Style绑定

绑定HTML Class

对象语法

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

# active这个class存在与否将取决于数据属性isActive的truthiness

可在对象中传入更多属性来动态切换多个class

v-bind:class指令也可与普通的class属性共存




    
    Document
    


    
message

isActivehasError变化时,class列表将相应地更新。

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




    
    Document
    


    
message

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




    
    Document
    


    
message

数组语法

可将一个数组传递给v-bind:class以应用一个class列表




    
    Document
    


    
message

也可使用三元表达式根据条件切换列表中的classs




    
    Document
    


    
message

当多个条件class写法会繁琐,可在数组中使用对象。




    
    Document
    


    
message

组件应用

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




    
    Document
    


    

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




    
    Document
    


    

绑定内联样式

对象语法

v-bind:style 的对象语法十分直观,看着很像CSS,但其实是一个JS对象。

CSS属性名可用驼峰法(camelCase)或短横线分割(kebab-case,需使用单引号包裹)来命名。




    
    Document
    


    
message

直接绑定到一个样式对象可使模板更清晰




    
    Document
    


    
message

同样的,对象语法常结合返回对象的计算属性使用。

数组语法

v-bind:style的数组语法可将多个样式对象应用到同一个元素上




    
    Document
    


    
message

自动添加前缀

v-bind:style使用需添加浏览器引擎前缀的CSS属性,如transform等。Vue会自动侦测并添加相应的前缀。

多重值

从Vue2.3.0+开始可为style绑定中的属性提供一个包含多个值的数组,常用语提供多个带前缀的值。




    
    Document
    


    
message

你可能感兴趣的:(Vue样式绑定)