vuejs3.0 从入门到精通——Vue语法——属性绑定（v-bind）

属性绑定（v-bind）

动态的绑定一个或多个 attribute，也可以是组件的 prop。

• 缩写：: 或者 . (当使用 .prop 修饰符)
• 期望：any（带参数）| Object（不带参数）
• 参数：attrOrProp（可选的）
• 修饰符：
  • .camel- 将短横线命名的attribute转变为驼峰式命名。
  • .prop- 强制绑定为DOM property。
  • .attr- 强制绑定为DOM attribute。
• 用途

• • • 当用于绑定class或styleattribute，v-bind支持额外的值类型如数组或对象。

• • • 在处理绑定时，Vue 默认会利用in操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用.prop和.attr修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。

• • • 当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。

• • • 当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。

• 示例

  <!-- 绑定 attribute -->
  <img v-bind:src="imageSrc" />
  
  <!-- 动态 attribute 名 -->
  <button v-bind:[key]="value"></button>
  
  <!-- 缩写 -->
  <img :src="imageSrc" />
  
  <!-- 缩写形式的动态 attribute 名 -->
  <button :[key]="value"></button>
  
  <!-- 内联字符串拼接 -->
  <img :src="'/path/to/images/' + fileName" />
  
  <!-- class 绑定 -->
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]"></div>
  
  <!-- style 绑定 -->
  <div :style="{ fontSize: size + 'px' }"></div>
  <div :style="[styleObjectA, styleObjectB]"></div>
  
  <!-- 绑定对象形式的 attribute -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
  
  <!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
  <MyComponent :prop="someThing" />
  
  <!-- 传递子父组件共有的 prop -->
  <MyComponent v-bind="$props" />
  
  <!-- XLink -->
  <svg><a :xlink:special="foo"></a></svg>
  

  .prop修饰符也有专门的缩写，.：

  <div :someProperty.prop="someObject"></div>
  
  <!-- 等同于 -->
  <div .someProperty="someObject"></div>

  当在 DOM 内模板使用.camel修饰符，可以驼峰化v-bindattribute 的名称，例如 SVGviewBoxattribute：

  <svg :view-box.camel="viewBox"></svg>
  

  如果使用字符串模板或使用构建步骤预编译模板，则不需要.camel。