Vue Lifecycle Hooks beforeCreate created beforeMount mounted beforeUpdate updated beforeUnmount unmounted errorCaptured renderTracked renderTriggered activated deactivated serverPrefetch
Vue
v-bind 指令在本页，我们将更详细地解释 v-bind 指令。
v-bind 指令
语法
v-bind 指令允许我们将 HTML 属性绑定到 Vue 实例中的数据。这使得动态更改属性值变得容易。
<img v-bind:src="url">
CSS 绑定
我们可以使用 v-bind 指令进行内联样式设置，并动态修改类。我们将在本节简要介绍如何操作，并在本教程稍后的 CSS 绑定页面 进行详细解释。
绑定样式
Vue 中的内联样式是通过将 style 属性与 Vue 进行绑定来实现的，使用 v-bind。
示例
作为 v-bind 指令的值，我们可以编写一个 JavaScript 对象，其中包含 CSS 属性和值
字体大小取决于 Vue 数据属性 'size'。
<div v-bind:style="{ fontSize: size }">
</div>
自己动手试一试 »
文本示例
示例
我们也可以选择将字体大小的数字值与字体大小的单位分开，如下所示
字体大小的数字值存储在 Vue 数据属性 'size' 中。
<div v-bind:style="{ fontSize: size }">
</div>
自己动手试一试 »
<div v-bind:style="{ fontSize: size + 'px' }">
示例
我们也可以使用 CSS 语法（kebab-case）用连字符来写 CSS 属性名，但不推荐这样做
CSS 属性 fontSize 被称为 'font-size'。
<div v-bind:style="{ fontSize: size }">
</div>
自己动手试一试 »
示例
<div v-bind:style="{ 'font-size': size + 'px' }">
背景颜色取决于 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 的值可以是一个变量
class 名称取自 'className' Vue 数据属性
<div v-bind:class="className">
</div>
自己动手试一试 »
类由 Vue 设置
示例
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: true }">
</div>
自己动手试一试 »
<div v-bind:class="{ myClass: isImportant }">
v-bind 的简写
示例
'v-bind:' 的简写就是 ':'。
这里我们只写 ':' 而不是 'v-bind:'
<div v-bind:class="{ myClass: true }">
</div>
自己动手试一试 »
<div :class="{ impClass: isImportant }">
Vue 练习
Vue
v-bind 指令
