Vue.js 中的 v-bind 指令：作用与使用详解

v-bind 指令在 Vue.js 中用于绑定一个或多个属性，或一个组件 prop 到表达式。当表达式的值变更时，绑定的属性也会自动更新。

基本用法如下：

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
 
<!-- 简写方式 -->
<img :src="imageSrc">
 
<!-- 绑定多个属性 -->
<div v-bind="{ id: containerId, 'data-name': name }">
 
<!-- 绑定一个 prop 到组件 -->
<custom-component v-bind:my-prop="value"></custom-component>
 
<!-- 简写方式 -->
<custom-component :my-prop="value"></custom-component>

在这个例子中，imageSrc、containerId、name 和 value 是 Vue 实例中的数据属性。当它们的值发生变化时，v-bind 指令会确保它们被应用到相应的 DOM 属性上。

v-bind 指令也可以用来绑定动态的 class 和 style 表达式。

<!-- 绑定动态 class -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
 
<!-- 绑定动态 style -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

在这个例子中，isActive 和 hasError 是 Vue 实例中的数据属性，activeColor 和 fontSize 也是数据属性，它们会动态地应用到 div 的 class 和 style 属性上。