CODEWITHSUNDEEP
javascripthtmlcssvue.jsvuejs2
Alex
Alex

Reputation: 655

Change CSS class property with Vue.js

I'm using Vue.js and I want to change a CSS class property. The HTML code which uses the class is the following:

<div class="fillTimerBar"></div>

And the CSS code:

.fillTimerBar {
        width: 100%;
        height: 8px;
 }

From there I want to change the width class property using a computed property from the Vue component.

Which would be correct way if any?

Upvotes: 26

Views: 63489

Answers (3)

Ben
Ben

Reputation: 51

You can use plain old javascript to add a new class to your div, then add css properties to elements that have the new class and your existing class. The CSS code if you wanted the width to be half (the more specific rule takes precedence):

.fillTimerBar {
        width: 100%;
        height: 8px;
 }
.fillTimerBar .HalfWidth {
        width: 50%;
 }

Upvotes: 0

t k
t k

Reputation: 407

To change a property inside a class, you can use CSS custom properties:

.fillTimerBar {
    --width: 100%;
    width: var(--width);
    height: 8px;
}

In Vue, you can bind CSS variables to the style:

<div class="fillTimerBar" :style="`--width: ${computedWidth}`"></div>

Upvotes: 15

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48327

You have to use v-bind:style directive.

var vm = new Vue({
  el: '#example',
  data: {
     width:'200px'
  },
  computed: {
    computedWidth: function () {
      return this.width;
    }
  },
  methods: {
    changeWidth: function (event) {
      this.width='100px';
    }
  }
})
#myDiv{
  background-color:red;
  height:200px;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="example">
  <div id="myDiv" v-bind:style="{ width: computedWidth }"></div>
  <button v-on:click="changeWidth()">Change</button>
</div>

Upvotes: 35

Related Questions