| | |
| | | rel="stylesheet" |
| | | /> |
| | | <link rel="stylesheet" href="styles.css" /> |
| | | <script src="https://unpkg.com/vue@next" defer></script> |
| | | <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script> |
| | | <script src="app.js" defer></script> |
| | | </head> |
| | | <body> |
| | |
| | | <h2>Assignment</h2> |
| | | <!-- 1) Add code to manage a list of tasks in a Vue app --> |
| | | <!-- When clicking "Add Task" a new task with the entered text should be added --> |
| | | <input type="text"> |
| | | <button>Add Task</button> |
| | | <input type="text" v-model="taskEntered"> |
| | | <button @click="addTask">Add Task</button> |
| | | <!-- <ul v-show="showTasks"> --> |
| | | <!-- 2) Output the list of tasks here --> |
| | | <!-- <li v-for="task in tasks">{{task}}</li> |
| | | </ul> |
| | | <ul v-show="!showTasks"> |
| | | </ul> --> |
| | | |
| | | <ul> |
| | | <!-- 2) Output the list of tasks here --> |
| | | <li v-show="showTasks" v-for="task in tasks" :key="task">{{task}}</li> |
| | | </ul> |
| | | |
| | | <!-- 3) When the below button is pressed, the list should be shown or hidden --> |
| | | <!-- BONUS: Also update the button caption --> |
| | | <button>Hide / Show List</button> |
| | | <button @click="toggleTasks">{{toggleTitle}} List</button> |
| | | </section> |
| | | </body> |
| | | </html> |