Styling Elements with Vue
Lesson 1 of 1
  1. 1
    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…
  2. 2
    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 …
  3. 3
    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…
  4. 4
    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’, …
  5. 5
    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…
  6. 6
    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…
  7. 7
    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 …

How you'll master it

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

Pro Logo