Vue.js每天必学之Class与样式绑定
数据绑定一个常见需求是操作元素的class列表和它的内联样式。因为它们都是attribute,我们可以用v-bind处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind用于class和style时,Vue.js专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
绑定HTMLClass
尽管可以用Mustache标签绑定class,比如`{%raw%}class=”{{className}}”{%endraw%}`,但是我们不推荐这种写法和`v-bind:class`混用。两者只能选其一!
对象语法
我们可以传给v-bind:class一个对象,以动态地切换class。注意v-bind:class指令可以与普通的class特性共存:
<divclass="static"v-bind:class="{'class-a':isA,'class-b':isB}"></div> data:{ isA:true, isB:false }
渲染为:
<divclass="staticclass-a"></div>
当isA和isB变化时,class列表将相应地更新。例如,如果isB变为true,class列表将变为"staticclass-aclass-b"。
你也可以直接绑定数据里的一个对象:
<divv-bind:class="classObject"></div> data:{ classObject:{ 'class-a':true, 'class-b':false } }
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。
数组语法
我们可以把一个数组传给v-bind:class,以应用一个class列表:
<divv-bind:class="[classA,classB]"> data:{ classA:'class-a', classB:'class-b' }
渲染为:
<divclass="class-aclass-b"></div>
如果你也想根据条件切换列表中的class,可以用三元表达式:
<divv-bind:class="[classA,isB?classB:'']">
此例始终添加classA,但是只有在isB是true时添加classB。
不过,当有多个条件class时这样写有些繁琐。在1.0.19+中,可以在数组语法中使用对象语法:
<divv-bind:class="[classA,{classB:isB,classC:isC}]">
绑定内联样式
对象语法
v-bind:style的对象语法十分直观——看着非常像CSS,其实它是一个JavaScript对象。CSS属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):
<divv-bind:style="{color:activeColor,fontSize:fontSize+'px'}"></div> data:{ activeColor:'red', fontSize:30 }
直接绑定到一个样式对象通常更好,让模板更清晰:
<divv-bind:style="styleObject"></div> data:{ styleObject:{ color:'red', fontSize:'13px' } }
同样的,对象语法常常结合返回对象的计算属性使用。
数组语法
v-bind:style的数组语法可以将多个样式对象应用到一个元素上:
<divv-bind:style="[styleObjectA,styleObjectB]">
自动添加前缀
当v-bind:style使用需要厂商前缀的CSS属性时,如transform,Vue.js会自动侦测并添加相应的前缀。
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。