What is Vue's v-bind and object syntax?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid Vue.js basics — a prerequisite for any developer role.
Answer
v-bind dynamically binds an expression to an attribute or component prop. Shorthand: :. Single attribute: <img :src="imageUrl">; <a :href="linkUrl">; <button :disabled="isLoading">. Object syntax for class binding: :class="{ active: isActive, 'text-error': hasError, disabled: isDisabled }" — keys are class names, values are boolean conditions. Multiple classes: combine with string or array: :class="[baseClass, { active: isActive }]". Object syntax for style binding: :style="{ color: textColor, fontSize: fontSize + 'px', backgroundColor: isDark ? '#000' : '#fff' }". Array syntax: :style="[baseStyles, conditionalStyles]" — merged. Spread all properties of an object as attributes: v-bind="attributeObject" — bind multiple attributes at once: const attrs = { id: "main", class: "card", href: "/about" }; <a v-bind="attrs">. Useful for wrapping/proxy components that pass attributes through. Modifier .prop: :somedom.prop="value" — force binding as DOM property instead of HTML attribute. Modifier .attr: force binding as HTML attribute. Dynamic attribute name: :[attributeName]="value" — compute the attribute name dynamically (square brackets).
Common Mistake
Rushing to answer is a common mistake. Take two seconds to structure your response: definition → example → trade-off. This structure makes complex Vue.js answers easy to follow.