v-bind 动态属性绑定

作用： 动态绑定HTML元素的属性或组件的props

大白话： 让HTML属性可以动态变化（例如：根据数据改变图片地址、链接、样式等）

使用方式：

  • 基本用法：<div v-bind:id=”dynamicId”></div>
  • 简写：<div :id=”dynamicId”></div> (推荐)
  • 绑定多个属性：<div v-bind=”objectOfAttrs”></div>

示例代码：

<!– 绑定class –>
<div :class=”{ active: isActive }”>动态样式</div>

<!– 绑定style –>
<div :style=”{ color: textColor, fontSize: size + ‘px’ }”>动态样式</div>

<!– 绑定图片地址 –>
<img :src=”imagePath” alt=”动态图片”>

注意：

  • 使用简写的冒号:更简洁
  • 绑定class和style时，Vue提供了增强功能（对象/数组语法）
  • 绑定布尔属性（如disabled）时，当值为null或undefined时该属性会被移除

指令交互演示区

在真实Vue环境中体验指令效果

v-model 演示

实时显示: {{ message }}

v-bind 演示

v-if 和 v-show 对比

v-if：元素被创建/销毁

v-show：只是显示/隐藏