1
00:00:02,120 --> 00:00:05,650
So v-for is very powerful and helpful

2
00:00:05,650 --> 00:00:07,610
for outputting lists of todos.

3
00:00:07,610 --> 00:00:09,823
And we will soon wire up those buttons.

4
00:00:10,740 --> 00:00:11,573
But first of all,

5
00:00:11,573 --> 00:00:15,010
I wanna show you another very useful directive,

6
00:00:15,010 --> 00:00:17,440
which you also might want to keep in mind

7
00:00:17,440 --> 00:00:18,773
when working with Vue.

8
00:00:19,630 --> 00:00:21,360
When we initially loaded this page,

9
00:00:21,360 --> 00:00:23,563
we have no todos yet, of course.

10
00:00:24,620 --> 00:00:28,050
Now we might want to show a message to the user then,

11
00:00:28,050 --> 00:00:30,727
maybe a paragraph where we say,

12
00:00:30,727 --> 00:00:35,727
"No todos added yet - maybe start adding some."

13
00:00:37,110 --> 00:00:38,960
This should show up.

14
00:00:38,960 --> 00:00:40,620
Now it does show up here,

15
00:00:40,620 --> 00:00:42,360
but if I add a new todo,

16
00:00:42,360 --> 00:00:44,660
it, of course, still shows up.

17
00:00:44,660 --> 00:00:48,083
Now I either want to show this message or my list.

18
00:00:49,040 --> 00:00:52,700
In JavaScript, we would solve this with a if/else statement,

19
00:00:52,700 --> 00:00:55,440
but now here it's about updating the DOM.

20
00:00:55,440 --> 00:00:58,313
But Vue has if/else directives for us.

21
00:00:59,320 --> 00:01:03,260
We can add v-if, another Vue-specific attribute,

22
00:01:03,260 --> 00:01:04,489
to the paragraph,

23
00:01:04,489 --> 00:01:08,460
or to any element that we wanna show conditionally,

24
00:01:08,460 --> 00:01:10,890
and set this equal to a condition,

25
00:01:10,890 --> 00:01:13,490
for example, to true if we always want to show it,

26
00:01:13,490 --> 00:01:14,610
in which case, of course,

27
00:01:14,610 --> 00:01:16,043
we wouldn't need to add it.

28
00:01:16,970 --> 00:01:18,880
But here we can also write a condition

29
00:01:18,880 --> 00:01:22,320
that we could write in a regular if block as well,

30
00:01:22,320 --> 00:01:27,320
like for example, todos.length === 0.

31
00:01:27,920 --> 00:01:31,060
So here you can write any code that you would write

32
00:01:31,060 --> 00:01:33,190
in a if block condition,

33
00:01:33,190 --> 00:01:36,050
so that you would write in regular JavaScript

34
00:01:36,050 --> 00:01:37,440
inside of a if block.

35
00:01:37,440 --> 00:01:39,490
Anything that goes in here

36
00:01:40,490 --> 00:01:43,310
can also be added to v-if.

37
00:01:43,310 --> 00:01:45,760
So any value that's true or false

38
00:01:45,760 --> 00:01:48,250
or truthy or falsy.

39
00:01:48,250 --> 00:01:50,270
So in this case, we show this paragraph

40
00:01:50,270 --> 00:01:53,250
if we have a todos length of zero,

41
00:01:53,250 --> 00:01:55,053
which means we have no todos yet.

42
00:01:55,950 --> 00:01:58,480
If we, else, want to show this unordered list,

43
00:01:58,480 --> 00:02:01,110
we could add v-else on that.

44
00:02:01,110 --> 00:02:03,120
It has to be added on an element

45
00:02:03,120 --> 00:02:06,973
that is a direct neighbor of the element with v-if, though.

46
00:02:08,199 --> 00:02:09,690
Alternatively, of course,

47
00:02:09,690 --> 00:02:14,560
we could also write v-if todos.length > 0 here.

48
00:02:14,560 --> 00:02:16,040
Either way it would work,

49
00:02:16,040 --> 00:02:18,040
but, of course, v-else is a bit shorter.

50
00:02:19,390 --> 00:02:21,840
With that, we have this text initially,

51
00:02:21,840 --> 00:02:23,690
but if I add a new todo,

52
00:02:23,690 --> 00:02:25,883
it's now replaced by our todo list.

53
00:02:26,980 --> 00:02:29,540
So that is another very important directive

54
00:02:29,540 --> 00:02:33,190
which helps you build highly dynamic user interfaces.

55
00:02:33,190 --> 00:02:36,630
And again, Vue does a lot of work for us here.

56
00:02:36,630 --> 00:02:40,230
We just write our different states that we want to have.

57
00:02:40,230 --> 00:02:42,440
This state, if we have no todos,

58
00:02:42,440 --> 00:02:44,910
this state if we do have todos,

59
00:02:44,910 --> 00:02:47,500
and then Vue will add and remove

60
00:02:47,500 --> 00:02:50,130
the fitting DOM elements for us.

61
00:02:50,130 --> 00:02:54,220
It adds and creates and inserts this paragraph for us,

62
00:02:54,220 --> 00:02:57,080
so it does a lot of work behind the scenes for us

63
00:02:57,080 --> 00:02:58,780
if we have no todos,

64
00:02:58,780 --> 00:03:00,780
and it removes this paragraph

65
00:03:00,780 --> 00:03:02,070
and creates this list

66
00:03:02,070 --> 00:03:04,630
and all these list items behind the scenes for us.

67
00:03:04,630 --> 00:03:07,030
And it adds this list in the right place

68
00:03:07,030 --> 00:03:10,750
behind the scenes for us when we do have todos.

69
00:03:10,750 --> 00:03:13,420
So really, a lot of work being done by Vue.

70
00:03:13,420 --> 00:03:15,260
And of course, that's one of the reasons

71
00:03:15,260 --> 00:03:19,083
why we use Vue or similar front-end frameworks.