Building the basic web page

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; ...

Get Vue.js 2 Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.