Rendering in Vue.js

Rendering is the third chapter of the free Vue.js tutorial. It shows how state decides what the page looks like, what appears on it and how lists are drawn.

What each lesson covers:

  • Dynamic Rendering: :class and :style with objects and arrays, v-if, v-else-if, v-else, <template> groups, v-show, and when to pick v-if or v-show.
  • List Rendering: v-for over arrays, objects and ranges, stable keys and why not the index, <template v-for>, components in lists, filtering and sorting with computed, and array change detection.

The first lesson changes how the page looks from your state. You bind classes and inline styles with objects and arrays, show or hide parts of the page with v-if, v-else-if and v-else, and learn when v-show is the better choice. The second lesson repeats markup with v-for: looping over arrays, why every item needs a unique key, repeating groups and components, and showing filtered and sorted lists with computed values. It ends with how Vue notices changes to an array.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

  1. Dynamic Rendering

    Class bindings with objects and arrays, classes on components, style bindings with units and CSS variables, v-if, v-else-if and v-else, truthy and falsy conditions, how v-if destroys state, forcing a fresh copy with :key, template groups, v-show, and when to choose v-if or v-show.

    • Switch classes on and off with :class objects and arrays
    • Set inline styles from state with :style
    • Show and hide parts of the page with v-if, v-else-if and v-else
    • Write correct truthy conditions, and know that v-if resets state
  2. List Rendering

    v-for over arrays, objects and ranges, item, index, key and value, why every item needs a stable key and why not the index, v-for on <template>, components in lists, why v-if and v-for do not share an element, filtering and sorting with computed, and array change detection.

    • Render arrays, objects and number ranges with v-for
    • Give every item a stable :key and explain why the index is risky
    • Filter and sort lists with computed instead of v-if inside v-for
    • Know which array changes Vue sees and how to replace an array