Welcome to Styling Elements with Vue! The name of this course may be slightly misleading — the only way to style HTML elements is still CSS. However, now that we know how to create dynamic web pages, we need our CSS to dynamically change too. Luckily, Vue contains features for making this essential functionality easy to implement.
In the first half of this lesson, we will learn how to dynamically add inline styles to HTML elements based on the data in our Vue applications. Then, in the second half of the lesson, we will learn how to refactor this work to dynamically add classes instead.
This lesson is fairly short, but the information in it is essential for making professional front-end web apps. Enjoy!
Over the course of this lesson, we will be finishing up our e-ticketing app by adding dynamic CSS styles.
We will dynamically style our app to make our “Submit” button look enabled when all required fields are filled in correctly and disabled when they are not. We will also focus on how to dynamically style our “Email” field to convey the different states a form field can enter.
By the end of the lesson, you will possess the skills to style all of the remaining form fields as well. However, incorporating all of this styling would be very repetitive and an unnecessary learning experience. We will discuss how future lessons will give you the skills to prevent this task from being repetitive.
Check out the app to the right to review the current state of the app. Then when you’re ready, click “Next” to continue. Good luck!