v-bind 你用对了吗？

先极简总结（2 句话记死，终身受用）

1. 绑 1 个属性：用缩写 :属性名="值"（原生标签 / Vue 组件通用，日常 90% 用这个）；
2. 绑 N 个属性：用 v-bind="属性对象"（无冒号、无属性名，属性越多越简洁，封装组件 / 配置驱动场景必用）。

核心前提先讲透（一句话干货）

• v-bind是 Vue 用来给HTML 标签 / Vue 组件绑定动态属性值的指令，只有 2 种核心用法，本质都是「动态传值」，区别仅在于绑 1 个属性还是绑多个属性

1. 单个属性绑定：v-bind:属性名="值" → 缩写 :属性名="值"（日常 90% 高频用）；

2. 批量属性绑定：直接v-bind="属性对象"（无属性名、无冒号，把多个属性打包成对象一次性绑定）；

关键：批量绑定的属性对象，键 = HTML 标签 / Vue 组件的属性名，值 = 要绑定的动态数据，Vue 会自动解析成「键 = 值」的单个属性，一一绑定到标签上。

例子 ：原生img图片标签（最易理解的通用场景）

img标签的src（图片地址）、alt（占位文字）、width（宽度）是所有人都认识的原生属性，用它举例最直观，重点看单个绑定和批量绑定的等价关系。

步骤 ：先定义 Vue 里的动态数据（脚本部分，通用）

<script setup> 
    // Vue3基础响应式数据，不用纠结ref，知道是动态值就行 
    import { ref } from 'vue' 
    // 图片地址 
    const imgUrl = ref('https://picsum.photos/200/200')
    // 图片占位文字 
    const imgText = ref('风景图') 
    // 图片宽度 
    const imgW = ref(200)
</script>

用法 1：单个属性绑定（缩写:，逐个绑）

最常用的写法，给img逐个绑定动态属性，每个属性都用:缩写，模板清晰：

<template> 
    <!-- 核心：每个原生属性前加:，绑定对应的动态值 --> 
    <img :src="imgUrl" :alt="imgText" :width="imgW" /> 
</template>

等价于完整v-bind写法（繁琐，几乎没人用）：

<script setup> 
    import { ref, reactive } from 'vue' 
    // 1. 先定义零散动态值 
    const imgUrl = ref('https://picsum.photos/200/200') 
    const imgText = ref('风景图') 
    const imgW = ref(200) 
    // 2. 打包成「属性对象」：键=img原生属性名，值=动态值 
    const imgProps = reactive({ src: imgUrl, alt: imgText, width: imgW }) 
</script> 
<template> 
    <!-- 核心：无属性名、无冒号，v-bind直接绑属性对象 --> 
    <img v-bind="imgProps" /> 
</template>

用法 2：批量属性绑定（v-bind="对象"，打包绑）

把img需要的所有动态属性打包成一个对象，用v-bind直接绑定这个对象，Vue 会自动解析：

<script setup> 
    import { ref, reactive } from 'vue' 
    // 1. 先定义零散动态值 
    const imgUrl = ref('https://picsum.photos/200/200') 
    const imgText = ref('风景图') 
    const imgW = ref(200) 
    // 2. 打包成「属性对象」：键=img原生属性名，值=动态值 
    const imgProps = reactive({ src: imgUrl, alt: imgText, width: imgW }) 
</script> 
<template> 
    <!-- 核心：无属性名、无冒号，v-bind直接绑属性对象 --> 
    <img v-bind="imgProps" /> 
</template>

完全等价于单个绑定的写法，Vue 会自动把imgProps里的src/alt/width逐个绑定到img标签上，效果一模一样。

单个和批量这两种用法是 Vue 最基础、最高频的语法，不用记复杂概念，只要知道「单个用:，多个用 v-bind = 对象」，就能搞定所有动态属性绑定场景。