Attribute binding with v-bind in Vue - Mini Project: Build & Apply

Attribute binding with v-bind

📖 Scenario: You are building a simple Vue app that shows a list of images with dynamic sources and alternative text. This helps users see pictures with correct descriptions.

🎯 Goal: Create a Vue component that uses v-bind to dynamically set the src and alt attributes of <img> tags from a data list.

📋 What You'll Learn

Create a reactive array called images with objects containing url and description keys

Create a variable called imageCount that stores the number of images

Use a v-for directive to loop over images and render an <img> for each

Use v-bind to bind the src attribute to the image's url

Use v-bind to bind the alt attribute to the image's description

💡 Why This Matters

🌍 Real World

Dynamic attribute binding is common in web apps to show images, links, or other elements that change based on data.

💼 Career

Understanding v-bind and reactive data is essential for Vue developers building interactive user interfaces.

1

Set up the images data array

Create a reactive array called images inside the setup function. It should contain exactly two objects: the first with url set to "https://example.com/cat.jpg" and description set to "A cute cat", the second with url set to "https://example.com/dog.jpg" and description set to "A happy dog".

Vue

import { ref } from 'vue'

// Create the images array here
// Your code here



  

Hint

Use ref to create a reactive array named images with two objects inside.

2

Add imageCount variable

Create a constant called imageCount inside the setup function. Set it to the length of the images array using images.value.length.

Vue

import { ref } from 'vue'

const images = ref([
  { url: "https://example.com/cat.jpg", description: "A cute cat" },
  { url: "https://example.com/dog.jpg", description: "A happy dog" }
])

// Create imageCount here
// Your code here



  

Hint

Use const imageCount = images.value.length to get the number of images.

3

Render images with v-for and bind attributes

Inside the <template>, use a v-for directive on a <div> to loop over images with variables image and index. Inside the loop, add an <img> tag. Use v-bind (shorthand :) to bind the src attribute to image.url and the alt attribute to image.description. Also add a :key attribute set to index on the <div>.

Vue

import { ref } from 'vue'

const images = ref([
  { url: "https://example.com/cat.jpg", description: "A cute cat" },
  { url: "https://example.com/dog.jpg", description: "A happy dog" }
])

const imageCount = images.value.length



  
    
    
  

Hint

Use v-for="(image, index) in images" on a <div> and bind src and alt on <img> with :src and :alt.

4

Display image count below images

Below the v-for loop in the <template>, add a <p> tag that shows the text "Total images: " followed by the value of imageCount using mustache syntax {{ imageCount }}.

Vue

import { ref } from 'vue'

const images = ref([
  { url: "https://example.com/cat.jpg", description: "A cute cat" },
  { url: "https://example.com/dog.jpg", description: "A happy dog" }
])

const imageCount = images.value.length



  
    
  
  
  

Hint

Use a <p> tag with {{ imageCount }} to show the total number of images.

Practice

1. What does v-bind do in Vue?

easy

A. It links HTML attributes to Vue data properties so they update automatically.

B. It creates a new Vue component.

C. It runs JavaScript code inside the template.

D. It styles elements with CSS.

Solution

1. Step 1: Understand the purpose of v-bind

   v-bind connects HTML attributes to Vue data, making the UI update when data changes.

2. Step 2: Compare options with this purpose

   Only It links HTML attributes to Vue data properties so they update automatically. describes this behavior correctly; others describe unrelated Vue features.

3. Final Answer:

   It links HTML attributes to Vue data properties so they update automatically. -> Option A

4. Quick Check:

   v-bind connects attributes to data = C [OK]

Hint: Remember: v-bind links attributes to data [OK]

Common Mistakes:

• Thinking v-bind creates components
• Confusing v-bind with event handling
• Assuming v-bind styles elements

2. Which of the following is the correct shorthand syntax for v-bind:href in Vue?

easy

A. $href

B. #href

C. :href

D. @href

Solution

1. Step 1: Recall Vue shorthand for v-bind

   The shorthand for v-bind:attr is :attr.

2. Step 2: Match the shorthand to the attribute

   For v-bind:href, the shorthand is :href.

3. Final Answer:

   :href -> Option C

4. Quick Check:

   v-bind shorthand = :attr = D [OK]

Hint: Use colon (:) before attribute for v-bind shorthand [OK]

Common Mistakes:

• Using @ instead of : for v-bind
• Confusing v-bind shorthand with event binding
• Adding extra symbols like # or $

3. Given the Vue template:

<a :href="url">Link</a>

and data: { url: 'https://vuejs.org' }, what will be the rendered href attribute in the browser?

medium

A. :href='url'

B. https://vuejs.org

C. url

D. undefined

Solution

1. Step 1: Understand v-bind behavior

   The :href="url" binds the href attribute to the value of url in data.

2. Step 2: Substitute the data value

   Since url is 'https://vuejs.org', the href attribute becomes this string.

3. Final Answer:

   https://vuejs.org -> Option B

4. Quick Check:

   Bound attribute shows data value = A [OK]

Hint: v-bind sets attribute to data value, not literal text [OK]

Common Mistakes:

• Thinking it outputs the literal string ':href="url"'
• Confusing attribute name with value
• Expecting 'url' as string instead of data value

4. What is wrong with this Vue template snippet?

<img v-bind:src='imageUrl></img>

medium

A. Missing closing quote for the attribute value.

B. v-bind cannot be used on <img> tags.

C. The tag <img> cannot have a closing tag.

D. The attribute should be v-bind:href, not v-bind:src.

Solution

1. Step 1: Check attribute syntax

   The attribute value for v-bind:src is missing the closing single quote after imageUrl.

2. Step 2: Verify other options

   v-bind works on <img>, <img> can be self-closing or no closing tag, and src is correct attribute for images.

3. Final Answer:

   Missing closing quote for the attribute value. -> Option A

4. Quick Check:

   Attribute quotes must be closed = B [OK]

Hint: Always close quotes around v-bind attribute values [OK]

Common Mistakes:

• Leaving quotes open in attribute bindings
• Thinking v-bind can't be on <img>
• Confusing src and href attributes

5. You want to bind a dynamic class name and a dynamic href attribute to an <a> tag in Vue. Which is the correct way to do this using v-bind shorthand?

hard

A. <a :class=linkClass :href=linkUrl>Click</a>

B. <a v-bind:class="linkClass" href="linkUrl">Click</a>

C. <a class=":linkClass" :href=linkUrl>Click</a>

D. <a :class="linkClass" :href="linkUrl">Click</a>

Solution

1. Step 1: Use correct v-bind shorthand syntax

   Shorthand for v-bind is a colon before the attribute name, and the value must be in quotes if it's a JavaScript expression.

2. Step 2: Check each option

   <a :class="linkClass" :href="linkUrl">Click</a> correctly uses :class="linkClass" and :href="linkUrl". <a v-bind:class="linkClass" href="linkUrl">Click</a> misses binding on href. Options C and D have incorrect quoting or missing quotes.

3. Final Answer:

   <a :class="linkClass" :href="linkUrl">Click</a> -> Option D

4. Quick Check:

   Use :attr="value" for binding multiple attributes = A [OK]

Hint: Use colon and quotes for each dynamic attribute [OK]

Common Mistakes:

• Not quoting the bound value
• Mixing static and dynamic attributes incorrectly
• Using wrong attribute names