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]">

转载于:https://www.cnblogs.com/jqq0820/p/8964650.html