Class 与 Style 绑定

绑定class

对象语法

我们可以传给 v-bind:class 一个对象,以动态地切换 class。注意 v-bind:class 指令可以与普通的 class 特性共存:

例如:<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': i%2===0}"></div>

如果isA=true,class-a绑定 ;其中i%2===0表示类型和值必须完全一致,i%2==0表示值相等就可以

数组语法

<div v-bind:class="[classA, classB]">

data:{

classA: 'class-a',
classB: 'class-b'

}

渲染为:<div class="class-a class-b"></div>

也可以用三元运算符:

<div v-bind:class="[classA, isB ? classB : '']">

可以在数组中使用对象:

<div v-bind:class="[classA, { classB: isB, classC: isC }]">

如果isB=true,结果为<div class="classA classB">

 

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS,其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case):

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

直接绑定到一个样式对象通常更好,让模板更清晰:

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
v-bind:style 的数组语法可以将多个样式对象应用到一个元素上
<div v-bind:style="[styleObjectA, styleObjectB]">

posted @ 2018-04-27 21:40  微风不噪,阳光正好  阅读(153)  评论(0编辑  收藏  举报