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



  

Need a 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



  

Need a 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



  
    
    
  

Need a 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



  
    
  
  
  

Need a hint?

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