Vue 3 — Inline Styles and v-if
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:24:15

---
title: Vue 3 — Inline Styles and v-if
published: true
date: 2020-07-26 01:31:19 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8ainline-styles-and-v-if-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258ainline-styles-and-v-if-2
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at inline style bindings and v-if.

### Binding Inline Styles

There’re various ways to bind inline styles to an element.

One way is to pass in an object to the `:style` directive.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{ color, fontSize: `${fontSize}px` }">
        hello
      </div>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            color: "red",
            fontSize: 30
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We have the `color` and `fontSize` properties in the object we return in the `data` method.

Then we used that in the object we use as the value of the `:style` directive.

So ‘hello’ should be red and 30px in size.

We can replace that with an object to make the template shorter.

For instance, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div :style="styleObj">
        hello
      </div>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            styleObj: {
              color: "red",
              fontSize: "30px"
            }
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

There’s also an array syntax to let us add multiple style objects to the same element.

For example, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div :style="[baseStyles, overridingStyles]">
        hello
      </div>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            baseStyle: {
              color: "red",
              fontSize: "30px"
            },
            overridingStyles: {
              color: "green"
            }
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We have the `baseStyles` and `overridingStyles` in one array.

The styles in `overridingStyles` will override the styles in `baseStyle` completely.

So we get that the text is green and it’s in its default size.

If browser-specific prefixes are needed, then they’ll be added automatically.

We can also provide an array of values to a style property with an array.

For instance, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
        hello
      </div>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {};
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We have all the variants of `flex` in the array.

### Conditional Rendering

We can add conditional rendering with the `v-if` directive.

For instance, we can write:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="app">
      <button @click="on = !on">toggle</button>
      <h1 v-if="on">hello world!</h1>
    </div>
    <script>
      const vm = Vue.createApp({
        data() {
          return {
            on: true
          };
        }
      }).mount("#app");
    </script>
  </body>
</html>

```

We have the `on` property returned with the object we return in`data` , so we can use it with `v-if` to conditionally render the h1 element.

Also, we have a button to toggle `on` between `true` or `false` so that we’ll see the h1 toggled on and off as we click the button.

### Conclusion

Inline styles can be added with the `:style` directive.

It takes an object or an array.

We can use `v-if` to conditionally render an element.

The post [Vue 3 — Inline Styles and v-if](https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8ainline-styles-and-v-if-2/) appeared first on [The Web Dev](https://thewebdev.info).