Styling Elements with Vue
Lesson 1 of 1
  1. 1
    Overview
    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 we…
    Start
  2. 2
    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 …
    Start
  3. 3
    Computed Style Objects
    A common pattern for adding dynamic inline style objects is to add a dynamic Vue app property that generates the style object. For example, we could refactor the previous example as follows: Brea…
    Start
  4. 4
    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’, …
    Start
  5. 5
    Classes
    As we mentioned earlier, you will use inline styles more often later in your Vue journey when you learn how to use components. Currently, our Vue apps all live in one file. Filling that file with…
    Start
  6. 6
    Class Arrays
    As was the case when we were applying style objects, sometimes we need to apply multiple class objects to a single element. To accommodate this, v-bind:class can take an array as its value. This a…
    Start
  7. 7
    Review
    Congratulations on completing this lesson! In this lesson, we covered a number of different techniques for dynamically styling Vue elements. We learned how to dynamically add inline styles using …
    Start

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory