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