So v-for is very powerful and helpful
for outputting lists of todos.
And we will soon wire up those buttons.
But first of all,
I wanna show you another very useful directive,
which you also might want to keep in mind
when working with Vue.
When we initially loaded this page,
we have no todos yet, of course.
Now we might want to show a message to the user then,
maybe a paragraph where we say,
"No todos added yet - maybe start adding some."
This should show up.
Now it does show up here,
but if I add a new todo,
it, of course, still shows up.
Now I either want to show this message or my list.
In JavaScript, we would solve this with a if/else statement,
but now here it's about updating the DOM.
But Vue has if/else directives for us.
We can add v-if, another Vue-specific attribute,
to the paragraph,
or to any element that we wanna show conditionally,
and set this equal to a condition,
for example, to true if we always want to show it,
in which case, of course,
we wouldn't need to add it.
But here we can also write a condition
that we could write in a regular if block as well,
like for example, todos.length === 0.
So here you can write any code that you would write
in a if block condition,
so that you would write in regular JavaScript
inside of a if block.
Anything that goes in here
can also be added to v-if.
So any value that's true or false
or truthy or falsy.
So in this case, we show this paragraph
if we have a todos length of zero,
which means we have no todos yet.
If we, else, want to show this unordered list,
we could add v-else on that.
It has to be added on an element
that is a direct neighbor of the element with v-if, though.
Alternatively, of course,
we could also write v-if todos.length > 0 here.
Either way it would work,
but, of course, v-else is a bit shorter.
With that, we have this text initially,
but if I add a new todo,
it's now replaced by our todo list.
So that is another very important directive
which helps you build highly dynamic user interfaces.
And again, Vue does a lot of work for us here.
We just write our different states that we want to have.
This state, if we have no todos,
this state if we do have todos,
and then Vue will add and remove
the fitting DOM elements for us.
It adds and creates and inserts this paragraph for us,
so it does a lot of work behind the scenes for us
if we have no todos,
and it removes this paragraph
and creates this list
and all these list items behind the scenes for us.
And it adds this list in the right place
behind the scenes for us when we do have todos.
So really, a lot of work being done by Vue.
And of course, that's one of the reasons
why we use Vue or similar front-end frameworks.