Vuev-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 对象：
如果愿意，我们还可以将字体大小数值与字体大小单位分开，如下所示：
示例
字体大小数值存储在 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%)' }">
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更改类属性。
的值v-bind:class可以是一个变量：
示例
这个classname 取自 '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:本教程中的语法以避免混淆。
Vue练习
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!