Handling element visibility with v-if and v-show

This section is all about element visibility. We are going to learn about two directives that can actually achieve the same result—toggling the element’s visibility—but with two underlying differences.

Toggling an element’s visibility means the ability to show or hide an element in our rendered HTML. This is a very common feature on the web today. This may be as simple as a dropdown appearing, a modal showing when a button is clicked, or more data being shown when a “show more” link is clicked.

Toggling visibility is the first of many features that support the increased adoption of many frontend frameworks by making the user experience flawless and reactive. First, we are going to add a button in our SocialPost.vue file that will show only if the article has comments, then we are going to display a new component called SocialPostsComments.vue that will be toggled by the new button and will...