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、自动添加前缀