Learn
Styling Elements with Vue
Multiple Style Objects

Another powerful aspect of v-bind:style is that it can also take an array of style objects as a value.

const app = new Vue({ data: { newsHeaderStyles: { 'font-weight': 'bold', color: 'grey' }, breakingNewsStyles: { color: 'red' } } });
<h2 v-bind:style="[newsHeaderStyles, breakingNewsStyles]">Breaking News</h2>

In this example, we’ve added another Vue app property, newsHeaderStyles. This is a style object that will presumably be used to style all news item headers. Then, using an array with v-bind:style, we add both of these style objects to our Breaking News element.

You may notice that both of these style objects contain a color value. When this happens, the style object added later in the array gets priority. So, Breaking News will be bold and red. The grey color rule will be overridden and not used.

Instructions

1.

There are three common states a form field often enters: untouched, touched, and invalid. Untouched represents the field when nothing has been typed into it. Touched represents the field with information filled in. Invalid represents the field when invalid information has been entered into the field. We will be styling all three of these states for our “Email” field.

We want the field to be lightly grayed out when it is untouched. Then we want the field to get darker once it has been touched. Additionally, we want the field to be red if an invalid email has been entered. For the sake of simplicity, we will just check to see if the email contains an @ symbol to determine if it is valid.

Let’s start by adding a computed property that returns style objects to represent whether the field is touched or untouched.

In app.js, add a computed property called touchedEmailStyles with a value of the following function:

function() { if (this.email) { return { 'border-color': '#bdbcbc', 'border-width': '2px' } } else { return { 'border-color': '#e0e0e0', 'border-width': '2px' } } }

This function will return a style object with a light gray border color if the “Email” field hasn’t been typed in yet and will return a darker gray border color if it has been. We’ve also made the size of the border slightly larger with border-width in both to indicate this is a required field.

2.

Next, let’s add a computed property that will style the “Email” field if it has been filled in incorrectly. We’ve already added a separate computed property called emailIsValid that performs the email validation logic.

In app.js, add a computed property called invalidEmailStyles and make the value the following function:

function() { if (this.email && !this.emailIsValid) { return { 'background-color': '#ffeded', 'border-color': '#da5252' } } }

This function will return a style object with a light red background and a dark red border if the “Email” field has been filled in with an invalid email value.

3.

Now let’s use our style objects to style the different states of the “Email” field.

In index.html, add a v-bind:style directive to the “Email” field that will style the field with both the touchedEmailStyles style object and the invalidEmailStyles style object.

Make sure to add touchedEmailStyles first so that the border color from invalidEmailStyles will override the border color from touchedEmailStyles if an invalid email is provided.

After you finish running your code, test out the field. The “Email” field should be slightly thicker than the rest of the fields. It should start with a light gray border, then the background color and the border should turn red when you type into it, and finally, the background should go back to white and the border should be a dark gray when you type an @ character into the field. Nice work!

Folder Icon

Sign up to start coding

Already have an account?