In this module, we will learn
A first look behind the scenes (optimizations)
Conditional rendering refers to showing content based on some certain condition.
For this, vue has a directive called v-if.
<p v-if="goals.length === 0">Length is 0</p>
Other directives such as v-else and v-else-if also work in the same way.
v-showv-show is another alternative to v-if which has the same functionality as that of the if statement however, it doesn’t work with the else and else-if directives.
The main difference is that with v-show the entire html element is not rendered at all. That means you wouldn’t find it in the HTML document when viewing the webpage’s source code. However, with v-show, a ‘display:none’ style property is added. So that means that it is in the HTML document and its rendered but its just not visible.
You should use only use v-show to an element whose visibility changes a lot.
In order to render lists of data and outputting repeated content, you can use the v-for directive.
<li @click="" v-for="goal in goals"></li>
goal can be named whatever you want and it will hold every value of goal in goals for every iteration (If that makes sense…).
You can also get the index of the item in the array. (Exclusively supported by vue)
<li @click="" v-for="(goal, index) in goals"> . </li>