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 名称-绑定值对的对象。

• 示例
  ?

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

  <!-- 绑定 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修饰符也有专门的缩写，.：

  ?

  1 2 3 4

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

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

  ?

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

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