Adding some CSS
Since we're not covering how to learn CSS in this course we are just going to include a CSS library called Bulma.
It's fantastic to work with and is a good alternative to Bootstrap. Just include this html tag inside your <head>:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
The first this we are going to do now is to replace the contents of <div id="hero_app"> with this code.
Next, we need to do is to make a change to the Vue instance.
Now we have added everything thing we need in order to test the conditional rendering. If you refresh the page in your browser you should see something like this:
As you can see here there is nothing more content than earlier because of the conditional rendering that makes the description block not visible because there is no description. If you add a little bit content to the description variable and refresh the page it will now look like this:
This is just the default card element from Bulma, but it gives us a great opportunity do cover many parts of Vue.
Extra information about conditional rendering
The directive v-if, v-else-if and v-else determines if a block should be rendered or not. If you just want to hide a block of code you can use the v-show directive which just adds a display: none to the element. Here is an example that will hide a block of code instead of preventing it from rendering:
Summary and mini challenge
In this last part, you learned how to show a block of code based on if a value is true or not. In this challenge I want you to make it possible to show a default description if the description value is empty. If you need help at this I suggest that you read the tip about conditional rendering a little bit further up at this page. This will not be a part of the course so when you're finished you can just remove it.