Vue3 v-bind 使用指南，从基础到高阶

Vue 开发中，除了 v-model、v-for，使用率最高的指令绝对是 v-bind。

很多人天天写 :src、:class，但其实只用到了 v-bind 10% 的能力。批量绑定、组件透传、CSS 变量绑定、Vue3 新版简写，大部分人都一知半解，开发时常踩坑。

今天这篇文章一次性吃透 Vue3 全部 v-bind 场景，日常开发直接套用！

一、v-bind 核心作用：

v-bind 用于动态绑定 HTML 属性、组件 props、样式类名，让标签属性不再是固定字符串，可以跟随 JS 变量动态变化。

两个核心知识点：

• 完整语法：v-bind:属性名="变量/表达式"
• 开发简写： :属性名="变量"

关键区别

• src="imgUrl"：无 v-bind，固定字符串，不会解析变量
• :src="imgUrl"：开启绑定，解析 JS 变量，动态更新

二、基础用法：绑定原生 HTML 属性：

1. 常规属性绑定（src / href / title 等）

最基础场景，动态绑定图片地址、跳转链接、提示文本等。

<template>
  <!-- 完整写法 -->
  <img v-bind:src="imgUrl" alt="图片">
  <a v-bind:href="linkUrl">跳转链接</a>

  <!-- 简写写法（推荐） -->
  <img :src="imgUrl" alt="图片">
  <a :href="linkUrl">跳转链接</a>
</template>

<script setup>
import { ref } from 'vue'
// 动态变量
const imgUrl = ref('https://xxx/1.png')
const linkUrl = ref('https://xxx.cn')
</script>

2. 布尔属性绑定（disabled / checked / readonly）

这类属性是高频踩坑点！原生静态属性 disabled="false" 依旧生效，必须用 v-bind 绑定布尔变量。

<template>
  <!-- 动态控制按钮禁用 -->
  <button :disabled="isDisable">提交按钮</button>
</template>

<script setup>
import { ref } from 'vue'
const isDisable = ref(true) // true 禁用 / false 启用
</script>

原理：v-bind 会识别布尔值，true 渲染属性、false 移除属性。

三、高阶用法1：对象批量绑定属性：

当元素需要绑定多个属性时，逐个写太繁琐，直接用 v-bind="对象" 批量绑定，一键展开所有属性。

<template>
  <!-- 批量绑定 id、title、class -->
  <div v-bind="boxAttr">批量属性绑定</div>

  <!-- 极简简写 :="对象" -->
  <div :="boxAttr">极简批量绑定</div>
</template>

<script setup>
const boxAttr = {
  id: 'demo-box',
  title: '我是提示文字',
  class: 'box-wrap',
  data-id: '1001'
}
</script>

重要优先级规则

如果同时写单独属性 和批量对象绑定 ，单独属性优先级更高，会覆盖对象中的同名属性。

<!-- 最终 id 为 my-id，覆盖 boxAttr 里的 id -->
<div :id="myId" :="boxAttr"></div>

四、高阶用法2：组件 Props 传参：

v-bind 是组件传参的核心，支持单个传参和批量批量透传，大幅简化父子组件传值代码。

1. 单个 Props 传参

<!-- 父组件 -->
<Child :name="userName" :age="userAge" />

2. 批量 Props 传参

无需逐个解构，直接将对象所有属性传给子组件。

<!-- 父组件 -->
<template>
  <Child v-bind="userInfo" />
</template>

<script setup>
import Child from './Child.vue'
const userInfo = {
  name: '前端开发者',
  age: 26,
  gender: '男'
}
</script>

<!-- 子组件 Child.vue -->
<script setup>
const props = defineProps(['name', 'age', 'gender'])
</script>

五、高频核心：class / style 动态绑定

日常开发 80% 的 v-bind 场景，都是动态绑定样式类名和行内样式，支持对象语法 和数组语法。

1. :class 对象语法（控制显隐类名）

键为类名，值为布尔值，true 生效、false 失效。

<template>
  <div class="base-box" :class="{ active: isActive, error: isError }">
    动态样式
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isActive = ref(true)
const isError = ref(false)
</script>

2. :class 数组语法（批量绑定类名）

<div :class="[boxClass, themeClass]"></div>

<script setup>
const boxClass = 'box-wrap'
const themeClass = 'dark-mode'
</script>

3. :style 动态行内样式

支持对象写法，CSS 属性使用驼峰命名。

<div :style="{ color: textColor, fontSize: '18px', fontWeight: 'bold' }">
  动态文字样式
</div>

<script setup>
const textColor = ref('#409eff')
</script>

六、Vue3 专属黑科技：CSS 内 v-bind

Vue3 最实用特性之一：style 样式中直接绑定 JS 变量，轻松实现动态主题、换色效果，无需繁琐样式覆盖。

<template>
  <div class="text-demo">Vue3 动态样式</div>
</template>

<script setup>
// JS 变量控制样式
const themeColor = ref('#67c23a')
const textSize = ref('20px')
</script>

<style scoped>
.text-demo {
  color: v-bind(themeColor);
  font-size: v-bind(textSize);
}
</style>

注意：CSS 内 v-bind 仅支持简单变量，不支持复杂表达式、三元运算。

七、Vue3.4+ 新版简写：

Vue3.4 新增同名属性简写，当属性名和变量名完全一致时，可直接省略赋值语句。

<script setup>
const id = ref('box-001')
const title = ref('测试标题')
</script>

<template>
  <!-- 新旧写法对比 -->
  <div :id="id" :title="title">旧写法</div>
  <div :id :title>Vue3.4+ 极简新写法</div>
</template>

八、新手容易踩的坑的总结：

整理 5 个最常见的 v-bind 坑点，开发直接规避：

1. 忘记加冒号 ：无 : 是静态字符串，加 : 才是动态变量
2. 布尔属性陷阱 ：disabled="false" 依旧生效，必须用 :disabled="false"
3. 属性覆盖问题：单独绑定属性 > 批量对象绑定，同名会覆盖
4. CSS 绑定限制：样式中 v-bind 不支持复杂表达式，只能用变量
5. 组件多余属性 ：批量透传会默认挂载到组件根元素，不需要可开启 inheritAttrs: false