vue.js第六课

class与style绑定
绑定HTML class
对象语法
数组语法
绑定内联样式
对象语法
数组语法
自动添加前缀
1、class与style绑定。
数据绑定一个常见需求就是 操作元素的class写和他的内联样式。
因为他们都是属性,我们可以用v-bind处理他们;
我们只需要计算出表达式最终的字符串。
不过字符串拼接麻烦又容易出错。
因此,在v-bind用于class和style时,vue.js专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
 
class=“{{className}}”
v-bind:class=“className”两者只能选其一。
方法一:对象
方法二:表达式
方法三:
2、数组语法
我们可以发一个数组传给V-bind:class,以应用一个class列表:
<div v-bind:class="[classA,classB]">
data:{
classA:'class-a',
classB:'class-b'
}
渲染为:
<div class="class-a class-b"></div>
 
若果想根据条件切换列表的class,可以用三元表达式:
<div v-bind:class="[classA , isB?classB: ' ']"> 此例适中添加classA,但是只有在isB是true时添加classB。
 
不过当有多个条件class时这样写有些繁琐。数组+对象语法
<div v-bind:class="[classA,{classB:isB,classC:isC}]"></div>
3、绑定内联样式:
对象语法
v-bind:style的UI相遇发非常直观——看起来非常像CSS,
其实他是一个javascript对象。css属性名可以用驼峰式或者分割线命名

这样可以实现行内样式,但是看起来有点啰嗦。可以直接绑定到一个样式对象,让模板清晰:
 

同样的,对象语法常常结合返回对象的计算属性使用:
 
多重数组语法:
4、自动添加前缀

 

posted @ 2016-12-26 10:02  盖大楼  阅读(176)  评论(0编辑  收藏  举报