Learn

Styling Elements with Vue

Inline Styles

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

Sign up to start coding

Or sign up using:

Already have an account?