Our web page will consist of two buttons each that will display a card: one is a recipe and the other is the last breaking news:
<div id="app"> <button @click="showRecipe = !showRecipe"> Recipe </button> <button @click="showNews= !showNews"> Breaking News </button> <article v-if="showRecipe" class="card"> <h3> Apple Pie Recipe </h3> <p> Ingredients: apple pie. Procedure: serve hot. </p> </article> <article v-if="showNews" class="card"> <h3> Breaking news </h3> <p> Donald Duck is the new president of the USA. </p> </article> </div>
The cards will have their unique touch, thanks to the following CSS rule:
.card { position: relative; background-color: FloralWhite; width: 9em; height: 9em; ...