Vue v-bind 动态属性绑定
292 字
1 分钟
Vue v-bind 动态属性绑定
v-bind 是 Vue.js 中用于动态绑定 HTML attribute（属性）的指令。它允许你在模板中将 JavaScript 表达式的值绑定到 HTML 元素的属性上，使页面能够根据数据的变化自动更新。
基本语法
<!-- 完整写法 --><a v-bind:href="url">链接</a>
<!-- 缩写：冒号 --><a :href="url">链接</a>绑定的值可以是任意 JavaScript 表达式：
<img :src="baseUrl + '/logo.png'" :alt="title" :width="size * 2" />绑定 class 与 style
这是 v-bind 最常用的场景之一，支持对象语法和数组语法：
<!-- 对象语法：条件为真时应用该 class --><div :class="{ active: isActive, 'text-red': hasError }"></div>
<!-- 数组语法 --><div :class="[baseClass, isActive ? 'active' : '']"></div>
<!-- style 对象语法 --><div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>动态 attribute 名
Vue 3 支持用方括号把 attribute 名也变成表达式：
<a :[attributeName]="url">这里的 attributeName 可以是动态的</a>与组件 props 的关系
在组件上使用 :prop-name="value" 时，v-bind 就是把父组件的数据传给子组件的 prop。配合 v-bind="obj" 还可以一次性把整个对象展开为多个 props：
<UserCard v-bind="userFields" />一句话总结：插值表达式负责把值写进文本，v-bind 负责把值写进 attribute。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！
相关文章智能推荐
1
Vue v-model 双向数据绑定
前端开发v-model 指令在表单控件与组件间同步数据的作用、特点与 Vue 3 自定义绑定。
2
Vue 组件属性 Props
前端开发Props 父子传值的基础用法、类型校验、默认值与必填约束。
3
Vue 生命周期钩子
前端开发Vue 组件创建、挂载、更新各阶段的生命周期钩子与可操作范围对照。
4
Grafana 可视化与监控
云原生与运维Grafana 的定位、常见数据源与 Grafana + Prometheus 经典监控链路。
5
微服务之间如何传递 trace
后端开发跨服务传递的是 trace 上下文而非 tracer：HTTP header、gRPC metadata 与 MQ 消息头的标准做法。
随机文章随机推荐