[JavaScript知识库]Vue中的样式绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定 HTML Class

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

 <h1 :class="{active: isActive}">使用class样式</h1>

上面的语法表示 active 这个 class 存在与否将取决于数据 property isActive 的 truthiness。

你可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class attribute 共存。当有如下模板

<!-- 在为class使用v-bind 绑定对象的时候，对象的属性类名，由于，对象的属性可带引号，也可不带引号，所以 这里我没写引号；属性的值是一个标识符 -->
 <h1 :class="{red:true,thin:true, italic:false,active:false}">使用class样式</h1>

和如下 data：

data: {
 italic:false
 active:false
}

数组语法

第一种：直接传递一个数组，注意：这里的class需要使用v-bind 做数据绑定

<h1 :class="['thin','italic','red']">使用class样式</h1>

第二种：在数组中使用三元表达式

<h1 :class="['thin','italic',flag?'red':'']">使用class样式</h1>

第三种：在数组中使用对象来代替三元表达式，提高代码的可读性

 <h1 :class="['thin','italic',{'active':flag}]">使用class样式</h1>

绑定 内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

  <h2 :style="{color:'red',font-style:'italic'}">使用内联样式</h2>

 <h2 :style="styObj">使用内联样式</h2>
<h2 :style="styObj2">使用内联样式</h2>

直接绑定到一个样式对象通常更好，这会让模板更清晰：

 data: {
      flag:false,
      styleObj:{color:'red','font-weight':200},
      styleObj2:{'font-weight':italic}
            }

同样的，对象语法常常结合返回对象的计算属性使用。