Vue v-bind 指令
绑定样式
Vue 的内联样式是通过使用 v-bind 将样式属性绑定到 Vue 来完成的。
作为 v-bind 指令的值，我们可以编写一个带有 CSS 属性和值的 JavaScript 对象:
如果我们愿意，我们还可以将字体大小数字值与字体大小单位分开，如下所示:
示例
字体大小数值存储在 Vue 数据属性"size"中。
<div v-bind:style="{ fontSize: size + 'px' }">
Text example
</div>
亲自试一试 »
我们也可以使用 CSS 语法（kebab-case）在连字符中编写 CSS 属性名称，但不建议这样做:
示例
CSS 属性 fontSize 称为"font-size"。
<div v-bind:style="{ 'font-size': size + 'px' }">
Text example
</div>
亲自试一试 »
示例
背景颜色取决于 Vue 实例内的"bgVal"数据属性值。
<div v-bind:style="{ backgroundColor: 'hsl('+bgVal+',80%,80%)' }">
请注意此 div 标签上的背景颜色。
</div>
亲自试一试 »
示例
背景颜色使用 JavaScript 条件（三元）表达式设置，具体取决于"isImportant"数据属性值是"true"还是"false"。
<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
有条件的背景颜色
</div>
亲自试一试 »
绑定类
我们可以使用v-bind来更改类属性。
v-bind:class 的值可以是一个变量:
示例
class 名称取自"className"Vue 数据属性:
<div v-bind:class="className">
The class is set with Vue
</div>
亲自试一试 »
v-bind:class 的值也可以是一个对象，其中类名只有设置为 'true' 才会生效:
示例
class 属性的分配与否取决于类"myClass"是否设置为"true"或"false":
<div v-bind:class="{ myClass: true }">
The class is set conditionally to change the background color
</div>
亲自试一试 »
当v-bind:class的值是一个对象时，可以根据 Vue 属性来分配类:
示例
class 属性根据"isImportant"属性（如果为"true"或"false"）进行分配:
<div v-bind:class="{ myClass: isImportant }">
The class is set conditionally to change the background color
</div>
亲自试一试 »
v-bind 的简写
'v-bind:'的简写形式就是':'。
示例
这里我们只写':'而不是'v-bind:':
<div :class="{ impClass: isImportant }">
The class is set conditionally to change the background color
</div>
亲自试一试 »
我们将在本教程中继续使用 v-bind: 语法以避免混淆。
