Module 3 - Rendering conditional content and lists

Question 1

what is v-if?

Answer 1

v-if is a Vue directive that based on a truthy/falsy value adds or removes a DOM element from the DOM

Question 2

what is v-show?

Answer 2

v-show is a Vue directive that either shows or hides using css a DOM element based on a truthy/falsy value

Question 3

What is the difference between v-if and v-show?

Answer 3

v-show hides or shows a DOM element with css while v–if removes the element completely from the DOM

Question 4

what is v-else

Answer 4

v-else allows for the next adjacent element to be displayed if the current element is not going to be displayed because v-if or v-else-if.

Question 5

what is v-else-if

Answer 5

v-else-if allows for the next adjacent element to be displayed if it meets a certain condition if the current element is not going to be displayed because v-if.

Question 6

what is v-for

Answer 6

v-for allow us to display a list of elements or a list of fields in an object. the syntax is v-for=”thing in things” {{thing}}

Question 7

How do you get the index of the item currently being worked on in v-for

Answer 7

in order to get the index you need to use the following syntax <li>v-for=”(goal, index) in goals” {{goal}} - {{index}} </li>

Question 8

How do you get the key in a v-for loop going over an object

Answer 8

You use the following syntax:

<li>v-for="(value,key) in {'name':'arik', age:47}" {{key}} - {{value}}</li>

You can also get the index using the following syntax

<li>v-for="(value,key,index) in {'name':'arik', age:47}" {{key}} - {{value}} - {{index}}</li>

Question 9

What would the following syntax produce

li v-for=”val in 10”){{val}}(/li

Answer 9

This syntax will create a list with 1-10 as the values in each li

Question 10

what does @click.stop do?

Answer 10

@click.stop is a directive that binds the click event to a function but also prevents the event from propagating to other elements along the chain. If we don’t specify a method to be executed we just stop the propagation of the event without activating any method.

Question 11

What is the key attribute?

Answer 11

The key attribute is used to uniquely identify a DOM element in v-for. It should be used everywhere we use v-for to avoid reuse element bugs in Vue