javascript / beginner
Snippet
Dynamic Attribute Binding
The colon shorthand (:) is used to bind HTML attributes like 'src' or 'alt' to JavaScript variables dynamically.
snippet.js
javascript
1
2
3
4
5
6
7
8
<template><img :src="imagePath" :alt="description"></template><script setup>const imagePath = '/logo.png';const description = 'Company Logo';</script>
vue
Breakdown
1
:src="imagePath"
Binds the src attribute of the image to the imagePath variable.
2
const imagePath = '/logo.png';
Defines the string variable used for the image source.