Vue.js 中的 v-bind 指令详解

Vue.js 中的 v-bind 指令详解

v-bind 是 Vue.js 的核心指令之一，用于动态绑定 HTML 属性（如 class、style、href 等）或组件 props 到 Vue 实例的数据。

一、基础语法

<!-- 完整语法 -->
<element v-bind:attribute="expression"></element><!-- 简写语法（推荐） -->
<element :attribute="expression"></element>

二、核心功能

1. 动态绑定普通属性

   <a :href="url">链接</a>
   <img :src="imagePath">
   

   data() {return {url: 'https://vuejs.org',imagePath: '/logo.png'}
   }
   

2. 绑定 class 和 style
   Vue 对这两个属性做了特殊增强：

   • 动态 Class（支持对象/数组语法）：

     <!-- 对象语法：根据布尔值切换 class -->
     <div :class="{ active: isActive, 'text-danger': hasError }"></div><!-- 数组语法：应用多个 class -->
     <div