Consider the following Vue component template using v-bind for attribute binding:
<template>
<button v-bind:disabled="isDisabled">Click Me</button>
</template>
<script setup>
import { ref } from 'vue'
const isDisabled = ref(true)
</script>What will the button look like in the browser?
<template> <button v-bind:disabled="isDisabled">Click Me</button> </template> <script setup> import { ref } from 'vue' const isDisabled = ref(true) </script>
Think about what the disabled attribute does when set to true.
The v-bind:disabled binds the disabled attribute to the reactive variable isDisabled. Since isDisabled is true, the button will be disabled and not clickable.
href attribute in Vue?You want to bind a dynamic URL to an anchor tag's href attribute using Vue's v-bind. Which of the following is syntactically correct?
Remember the correct syntax for v-bind with attribute names and values.
The correct syntax is v-bind:href="url" or shorthand :href="url". Option A uses the full correct syntax. Option A is missing quotes around the value, which is invalid. Option A uses incorrect parentheses. Option A is missing quotes around the value.
Given this Vue component snippet:
<template>
<img v-bind:src="imageSrc" alt="Image"/>
</template>
<script setup>
const imageSrc = './img1.png'
setTimeout(() => {
imageSrc = './img2.png'
}, 2000)
</script>Why does the image not change after 2 seconds?
<template> <img v-bind:src="imageSrc" alt="Image"/> </template> <script setup> const imageSrc = './img1.png' setTimeout(() => { imageSrc = './img2.png' }, 2000) </script>
Think about how Vue tracks changes to variables to update the DOM.
In Vue, only reactive variables trigger updates. Here, imageSrc is a plain constant string, not reactive. Using ref makes it reactive and allows Vue to update the image source dynamically.
title attribute after clicking the button?Examine this Vue component:
<template>
<button v-bind:title="tooltip" @click="changeTooltip">Hover me</button>
</template>
<script setup>
import { ref } from 'vue'
const tooltip = ref('Initial tip')
function changeTooltip() {
tooltip.value = 'Updated tip'
}
</script>After clicking the button once, what is the title attribute shown on hover?
<template> <button v-bind:title="tooltip" @click="changeTooltip">Hover me</button> </template> <script setup> import { ref } from 'vue' const tooltip = ref('Initial tip') function changeTooltip() { tooltip.value = 'Updated tip' } </script>
Consider how reactive variables update bound attributes on events.
The title attribute is bound to the reactive tooltip. Clicking the button calls changeTooltip, which updates tooltip.value. Vue updates the attribute to 'Updated tip'.
v-bind is preferred over string interpolation for binding attributes?In Vue, you can bind attributes using v-bind or by using string interpolation inside attribute values. For example:
<img v-bind:src="imageUrl" />
<img src="{{ imageUrl }}" />Why is v-bind the preferred method for binding attributes?
Think about how Vue updates the DOM when data changes and how attributes behave.
v-bind creates a reactive binding to the attribute, so when the data changes, Vue updates the attribute automatically. String interpolation inside attributes is static and does not update reactively. Also, v-bind handles boolean and special attributes properly, avoiding invalid HTML.