v-bind

v-bind

• Shorthand: :

• Expects: * (with argument) | Object (without argument)

• Argument: attrOrProp (optional)

• Modifiers:

  • .sync - make the binding two-way. Only respected for prop bindings.
  • .once - make the binding one-time. Only respected for prop bindings.
  • .camel - convert the attribute name to camelCase when setting it. Only respected for normal attributes. Used for binding camelCase SVG attributes.

• Usage:

  Dynamically bind one or more attributes, or a component prop to an expression.

  When used to bind the class or style attribute, it supports additional value types such as Array or Objects. See linked guide section below for more details.

  When used for prop binding, the prop must be properly declared in the child component. Prop bindings can specify a different binding type using one of the modifiers.

  When used without an argument, can be used to bind an object containing attribute name-value pairs. Note in this mode class and style does not support Array or Objects.

• Example:

  <!-- bind an attribute -->
  <img v-bind:src="imageSrc">
  
  <!-- shorthand -->
  <img :src="imageSrc">
  
  <!-- class binding -->
  <div :class="{ red: isRed }"></div>
  <div :class="[classA, classB]"></div>
  <div :class="[classA, { classB: isB, classC: isC }]">
  
  <!-- style binding -->
  <div :style="{ fontSize: size + 'px' }"></div>
  <div :style="[styleObjectA, styleObjectB]"></div>
  
  <!-- binding an object of attributes -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
  
  <!-- prop binding. "prop" must be declared in my-component. -->
  <my-component :prop="someThing"></my-component>
  
  <!-- two-way prop binding -->
  <my-component :prop.sync="someThing"></my-component>
  
  <!-- one-time prop binding -->
  <my-component :prop.once="someThing"></my-component>

• See also:

  • Class and Style Bindings
  • Component Props