Vue v-bind 指令

您已经看到，基本的 Vue 设置由一个 Vue 实例组成，我们可以通过 {{ }} 或 v-bind 指令从<div id="app"> 标记访问它。

在本页中，我们将更详细地解释 v-bind 指令。

v-bind 指令

v-bind 指令允许我们将 HTML 属性绑定到 Vue 实例中的数据。这样可以很容易地动态更改属性值。

语法

<div v-bind:[attribute]="[Vue data]"></div>

实例

<img> 标记的 src 属性值取自Vue实例数据属性 "url"：

<img v-bind:src="url">

CSS 绑定

我们可以使用 v-bind 指令进行内联样式设置并动态修改类。我们将在本节中向您简要介绍如何做到这一点，在本教程稍后的 CSS 绑定 页面上，我们将对此进行更详细的解释。

绑定样式

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

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

实例

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

<div v-bind:style="{ fontSize: size }">
  Text example
</div>

如果需要，我们还可以将字体大小数值与字体大小单位分开，如下所示：

实例

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

<div v-bind:style="{ fontSize: size + 'px' }">
  Text example
</div>

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

实例

<div v-bind:style="{ 'font-size': size + 'px' }">
  Text example
</div>

实例

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

<div v-bind:style="{ backgroundColor: 'hsl('+bgVal+',80%,80%)' }">
  Notice the background color on this div tag.
</div>

实例

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

<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
  Conditional background color
</div>

绑定样式表

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

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: 语法。