Chapter quiz · Templates & Directives

Test what you learned.

8 questions on Templates & Directives. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

Templates & Directives — Chapter Quiz

Eight questions on v-if, v-for, v-model, event modifiers, class binding, and slots.

0/ 9

Question 1
1
What is the difference between v-if and v-show?
AThey are identicalBv-if adds/removes the element; v-show toggles display: noneCv-show is asyncDv-if only works on <template>
v-if mounts/unmounts the element. v-show keeps it in the DOM and just toggles display.
Question 2
2
Why does each v-for item need a unique :key?
AFor TypeScript inferenceBSo Vue can efficiently track which item is which during updatesCRequired by HTMLDFor accessibility
Keys let Vue match each item across re-renders. Without unique keys, you get state-bleed between items and bad performance.
Question 3
3
v-model on an <input> is shorthand for:
A:value + @inputB:checked + @changeC:src + @loadDJust :value
On a text input, v-model="x" desugars to :value="x" @input="x = $event.target.value".
Question 4
4
What does @click.stop do?
AStops the page from scrollingBPrevents the default actionCCalls event.stopPropagation() for the clickDDisables the button
.stop calls event.stopPropagation(). Use .prevent to call preventDefault().
Question 5
5
How do you conditionally apply two classes based on state?
A<div :class="active ? \"a\" : \"b\""></div>B<div :class="{ active: isOn, ghost: !isOn }"></div>C<div className="active"></div>D<div class="{{active}}"></div>
The object syntax :class="{ name: condition }" is the idiomatic way to toggle classes.
Question 6
6
A scoped slot lets the child component pass data back up to the parent slot content.
TTrueFFalse
Scoped slots use <slot :item="x" /> in the child; <template #default="{ item }">…</template> in the parent.
Question 7
7
The default slot can be referenced explicitly with <template #___>.
<template #default> (or the shorthand <template v-slot>) refers to the unnamed slot.
Question 8
8
Which are valid built-in Vue directives?
Select all that apply.
Av-ifBv-forCv-bindDv-htmlEv-each
v-each isn't a thing — it's v-for. The others are core directives.