Vuejs Introduction Templates

:key="item.id">

@click="toggleFollow">

!-- Mathematical expressions -->

!-- String operations -->

!-- Conditional expressions -->

!-- Function calls -->

!-- Array/Object access -->

!-- Full v-bind syntax -->

!-- Shorthand syntax -->

="imageSrc" :alt="imageAlt">

!-- Class binding -->

="containerClass">Content

!-- This will render as plain text -->

!-- This will render as HTML -->

!-- Safe usage with sanitized content -->

!-- Common use case: Rich text content -->

!-- Complex interpolation -->

!-- Multiple computed values -->

!-- Basic conditional rendering -->

notifications

@click="showLoginForm = true">Log In

Manage Users

Review Content

Edit Profile

Limited functionality available

Learn about Full Access Granted.

Learn about Please verify your account.

!-- Basic array rendering -->

:key="item.id">

:key="item.id">

:key="product.id">

:key="item.id">

!-- Basic event handling -->

@click="handleClick">Click Me (shorthand)

!-- v-show vs v-if comparison -->

Shown/Hidden with v-show

Rendered/Removed with v-if

!-- Loading states -->

Loading...

!-- Conditional styling with v-show -->

: hasError }"

>

Error:

!-- Dynamic classes -->

: isActive, disabled: isDisabled }">

Dynamic classes

!-- Text input -->

!-- Textarea -->

Message length:

!-- Email input with validation -->

!-- Password input -->

Password strength:

1
2**Checkbox and Radio Button Binding:**
3

!-- Single checkbox -->

I agree to the terms and conditions

Thank you for agreeing!

!-- Multiple checkboxes (array binding) -->

:key="interest">

:value="interest">

!-- Radio buttons -->

:key="plan.id">

:value="plan.id">

!-- Radio with object values -->

:key="type.value">

:value="type">

!-- Single select -->

Choose a country:

Please select one

:key="country.code" :value="country.code">

Choose languages (hold Ctrl/Cmd for multiple):

:key="language" :value="language">

Selected languages:

Choose a framework:

="null">No preference

% popularity)

!-- .lazy modifier - sync on change instead of input -->

Lazy sync (updates on blur):

.lazy="lazyValue" type="text">

!-- .number modifier - auto type conversion to number -->

Age (auto-converts to number):

.number="age" type="number" min="0" max="150">

!-- .trim modifier - auto trim whitespace -->

Name (auto-trims whitespace):

.trim="trimmedName" type="text">

" (length:

!-- Combining modifiers -->

Score (lazy + number):

.lazy.number="score" type="number">

!-- Custom input components with v-model -->

Custom value:

@submit.prevent="submitForm">

!-- Personal Information -->

Personal Information

First Name:

.trim="form.firstName" type="text" required>

Last Name:

.trim="form.lastName" type="text" required>

.trim="form.email" type="email" required>

!-- Preferences -->

Preferences

Subscribe to newsletter

Notification preferences:

:key="method">

:value="method">

Preferred contact time:

No preference

Morning (9AM-12PM)

Afternoon (12PM-5PM)

Evening (5PM-8PM)

I agree to the

Terms of Service

Form Data (Debug)

Counter value:

Selected date:

:key="skill">

@click="toggleFollow" :class="

: isFollowing }">

@click="increment">Increment

@click="increment">Increment

@add-todo="addTodo">

="todos"

@toggle-todo="toggleTodo"

@delete-todo="deleteTodo"

>

@submit.prevent="submitTodo">