We will start this lesson by demonstrating how to dynamically add inline styles to HTML elements in your Vue application.
As you might recall from early on in learning CSS, inline styles are CSS style rules added directly to HTML elements. You apply inline styles by using the style
attribute on HTML elements, like so:
<h2 style="color:red">Breaking News</h2>
In the past, we have advocated against the use of inline styles, since they make CSS harder to debug and make HTML harder to read. However, front-end frameworks actually make inline styling a powerful tool due to their ability to contain CSS to small, reusable pieces of front-end code. We will use them extensively later on in your Vue journey.
Here is the syntax for adding dynamic inline styles using Vue:
<h2 v-bind:style="{ color: breakingNewsColor, 'font-size': breakingNewsFontSize }">Breaking News</h2>
const app = new Vue({ data: { breakingNewsColor: 'red', breakingNewsFontSize: '32px' } });
In this example, we use the v-bind:style
directive to set the value of two inline styles to two Vue app properties. The value of the v-bind:style
directive is an object where the keys are CSS properties and the values are dynamic properties on the Vue app.
In this case, we set the color
property on an <h2>
element to the value of breakingNewsColor
on the Vue app, 'red'
, and the font-size
property to breakingNewsFontSize
, '32px'
.
Note in the example that if we want to set a value for a hyphenated CSS property, such as font-size
, we need to put the property name in quotes in order to construct a valid JavaScript object.
This example only used values stored in data
, however computed
properties can be used for v-bind:style
and all of the other directives covered in this lesson in the same way.
While dynamic inline styles are only used to make our HTML slightly more readable in this example, we will have more impressive uses for inline styling in the next exercise.
Instructions
Let’s style our “Confirm Tickets” submit button so that it only looks clickable when all of the required fields have been filled in. To make the button look disabled, we will make the button gray and set the cursor to default (not a pointer) when a user hovers over it.
Start by adding a computed
property called submitButtonColor
to app.js with a value of the following function:
function() { if (this.formIsValid) { return '#4c7ef3'; } else { return 'gray'; } }
This function will check the computed
property formIsValid
and will return the current blue color, #4c7ef3
, if the form is valid or it will return gray
if the form is not valid.
Next let’s create the computed property that will determine which cursor to use. In app.js, add a computed property called submitButtonCursor
with a value of the following function:
function() { if (this.formIsValid) { return 'pointer'; } else { return 'default'; } }
This function will return a pointer if the form is valid and will keep the cursor as the default cursor if it is not.
Now let’s use v-bind:style
to style our button with these computed properties.
In index.html, add a v-bind:style
directive to the “Confirm Tickets” submit button that will set the background-color
value of the button to submitButtonColor
and the cursor
value of the button to submitButtonCursor
.
Don’t forget that hyphenated CSS properties, like background-color
, must be put in quotes when adding them to the style object.
Once you’ve finished running your code, test out the site to make sure it works as expected. At first, the “Confirm Tickets” button should be gray and your cursor should not change when you hover over the button. Then once you fill out the “First Name”, “Last Name”, and “Email” fields and check the “I Agree” checkbox, the button should turn blue and your cursor should change to a pointer when you hover over it.