Vue v-bind 指令
您已经了解到，基本的 Vue 设置包括一个 Vue 实例，我们可以使用 <div id="app"> 标签中的 {{ }} 或 v-bind 指令访问它。
在本页，我们将更详细地解释 v-bind 指令。
v-bind 指令
v-bind 指令允许我们将 HTML 属性绑定到 Vue 实例中的数据。这使得动态更改属性值变得容易。
语法
<div v-bind:[attribute]="[Vue data]"></div>
CSS 绑定
我们可以使用 v-bind 指令进行内联样式并动态修改类。在本节中，我们将简要介绍如何做到这一点，在本教程后面的 CSS 绑定页面 中，我们将更详细地解释这一点。
绑定样式
使用 Vue 进行内联样式是通过将 style 属性绑定到 Vue 使用 v-bind 来实现的。
作为 v-bind 指令的值，我们可以写一个包含 CSS 属性和值的 JavaScript 对象
如果需要，我们也可以将字体大小数字值与字体大小单位分开，例如
我们也可以用 CSS 语法（kebab-case）用连字符写 CSS 属性名，但这是不推荐的
示例
CSS 属性 fontSize 称为 'font-size'。
<div v-bind:style="{ 'font-size': size + 'px' }">
文本示例
</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 来更改 class 属性。
v-bind:class 的值可以是一个变量
v-bind:class 的值也可以是一个对象，其中类名只有在设置为 'true' 时才会生效
示例
class 属性是否分配取决于类 'myClass' 是否设置为 'true' 或 'false'
<div v-bind:class="{ myClass: true }">
类根据条件设置以更改背景颜色
</div>
自己尝试 »
当 v-bind:class 的值为对象时，可以根据 Vue 属性分配类
示例
class 属性根据 'isImportant' 属性分配，如果它是 'true' 或 'false'
<div v-bind:class="{ myClass: isImportant }">
类根据条件设置以更改背景颜色
</div>
自己尝试 »
v-bind 的简写
'v-bind:' 的简写就是 ':'。
在本教程中，我们将继续使用 v-bind: 语法，以避免混淆。
