v-bind

绑定样式

Vue 的内联样式是通过使用 v-bind 将样式属性绑定到 Vue 来完成的。

作为 v-bind 指令的值，我们可以编写一个带有 CSS 属性和值的 JavaScript 对象:

示例

字体大小取决于 Vue 数据属性"size"。

如果我们愿意，我们还可以将字体大小数字值与字体大小单位分开，如下所示:

示例

字体大小数值存储在 Vue 数据属性"size"中。

我们也可以使用 CSS 语法（kebab-case）在连字符中编写 CSS 属性名称，但不建议这样做:

示例

CSS 属性 fontSize 称为"font-size"。

示例

背景颜色取决于 Vue 实例内的"bgVal"数据属性值。

示例

背景颜色使用 JavaScript 条件（三元）表达式设置，具体取决于"isImportant"数据属性值是"true"还是"false"。

绑定类

我们可以使用v-bind来更改类属性。

v-bind:class 的值可以是一个变量:

示例

class 名称取自"className"Vue 数据属性:

v-bind:class 的值也可以是一个对象，其中类名只有设置为 'true' 才会生效:

示例

class 属性的分配与否取决于类"myClass"是否设置为"true"或"false":

当v-bind:class的值是一个对象时，可以根据 Vue 属性来分配类:

示例

class 属性根据"isImportant"属性（如果为"true"或"false"）进行分配:

v-bind 的简写

'v-bind:'的简写形式就是':'。

示例

这里我们只写':'而不是'v-bind:':

我们将在本教程中继续使用 v-bind: 语法以避免混淆。

Vue 练习

="className">
  The class is set with Vue