Vue.js 中使用 v-bind 绑定数据值
在 Vue.js 中，我们可以使用 v-bind 指令来绑定数据值到 HTML 元素的属性上，这样可以使得 HTML 元素的属性值动态的绑定到 Vue 实例中的数据属性。
基本用法
v-bind 指令可以在绑定表达式时使用缩写形式，例如 v-bind:href 可以缩写为 :href。下面是一个基本的例子：
<div v-bind:id="itemId"></div>
上面代码中，v-bind:id 可以缩写为 :id，这里的 itemId 是 Vue 实例中的一个数据属性。
条件渲染
v-bind 指令也可以在条件渲染中使用。例如，我们可以根据一个布尔值动态的渲染一个 class 到 HTML 元素上。
<div v-bind:class="{ active: isActive }"></div>上面的代码中，div 元素会根据 isActive 数据属性的值来动态的渲染一个 active class 到其 class 属性上。
绑定对象
我们也可以使用对象来一次性绑定多个属性和值到元素上。
<div v-bind="{ id: itemId, class: 'item' }"></div>上面的代码中，div 元素会绑定 id 属性和 class 为 item，并且它们的值分别绑定到 itemId 和字符串 "item"。
绑定 props
我们也可以使用 v-bind 指令来向子组件传递 props。
<my-component v-bind:prop-name="propValue"></my-component>
上面的代码中，我们使用 v-bind 指令将 propValue 数据属性绑定到 MyComponent 组件的 propName 属性上。
总结
v-bind 指令让我们可以将 Vue 实例中的数据属性动态的绑定到 HTML 元素的属性中。这样可以使得 HTML 元素的属性值实时更新，并实时响应 Vue 实例中数据的变化，从而实现了前后端数据绑定的效果。
示例代码
下面是一个关于 v-bind 指令的完整示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- -------------- ------ ---------------- -------- ------------------------------------------------------------------- -------- ------- - -------------------- ----- ----------- ----- ----------------- ---- --- --------- - -------------------- ----- --------- ----- --- --------- ------- ------ ----- --------- ------ ------------------- ----- --------------- ------- -------- -------- ---------- ------- --------- --- ------- ------ ------ ------- ------------- ---------------- -------------------------------------------- -------- ------- --------- ------------------------------- - --------- ------------- ------------ -------- ------ -- -------- ------- ----- ----- -- - --- ----- ------ ------- -------- - ----------- --- ------------- ----- -------------- ---------- ------ ---- ----- ---------- ------- -------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a49362add4f0e0ffce16ba