Is it possible to bind the inline style with vue.js?

Question

I am curious, is it possible to bind the inline style in Vue.js? I'm familiar with class binding but what if sometimes for some reason you want to bind a style statement inline, is it possible to bind it like you do with class?

For example:

<template>
  <div>
      <h1 :style="{('background:red') : condition}"> Text </h1>
      <button @click='condition = true'>Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: false,
    };
  },
};
</script>

In the example above I'd like to change the background of the element when the condition becomes true.

tony19 · Accepted Answer · 2022-07-15 00:24:53Z

8

Of course it is possible as described here: https://v2.vuejs.org/v2/guide/class-and-style.html

<template>
  <div>
      <h1 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Text </h1>
      <button @click='condition = true'>Click me</button>
  </div>
</template>

<script> 
export default {
  data() {
    return {
      condition: false,
      activeColor: 'white',
      fontSize: 12,
    };
  },
};
</script>

edited Jul 15, 2022 at 0:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 4, 2019 at 9:26

Thomas

2,5461 gold badge19 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 20:53:03Z

8

Yes, it's possible please go through the docs

Note: please use computed, methods instead of inline for better debugging

<template>
  <div>
    <h1 :style="styleObject"> Text </h1>
    <button @click='toggleCondition'>Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: false,
    };
  },
  computed: {
    styleObject() {
      return this.condition ? { background: 'red' } : {};
    },
  },
  methods: {
    toggleCondition() {
      this.condition = !this.condition;
    },
  },
};
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

edited Jul 15, 2022 at 20:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 4, 2019 at 11:37

nmanikiran

3,1981 gold badge19 silver badges21 bronze badges

1 Comment

Armin Over a year ago

Tnx, I'm still a bit new to vue so didn't go through all the docs and needed this real quick. You and Thomas made this very clear to me!

Collectives™ on Stack Overflow

Is it possible to bind the inline style with vue.js?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related