[Vuejs]-Why should I use v-bind for style

by

1👍

Let’s say you need to create a progress bar that is not static. You will then need to update the style attribute width for-example.

To accomplish this, we need to programatically edit the width of the element. We ‘cannot’ to this in plain css, therefore the :style attribute comes in handy.

Let’s create an example:
Codepen

HTML 

<div id="vue">
  <div class="progress-bar">
    <div :style="{'width':progress + '%'}" class="progress" />
  </div>
  <button @click="fakeProgress">Init fake progress</button>
</div>

Css; 

.progress-bar, .progress {
  border-radius: 20px;
  height: 20px;
} 
.progress-bar {
  width: 250px;
  background-color: gray;
}

.progress {
  background-color: blue;
  width: 0;
  transition: all 1s ease;
}

Javascript 

new Vue({
  el: '#vue',
  data: {
    progress: 0
  },
  methods: {
    fakeProgress() {
      let progress = setInterval(() => {
        if(this.progress == 100) {
         clearInterval(progress) 
        } else {
         this.progress += 1;
        }
      }, 50)
    }
  }
})

As you see here, we bind the progress data attribute to the width value on the fake progress bar. This is just a simple example, but I hope this makes you see its potential. (You could achieve this same effect using the <progress> tag, but that would ruin the explanation.

EDIT; Also want to point out that you are supposed to write all your css as normal as you point out in your question. However, :style is used in cases that you cannot normally use css for. Like the example above where we need css to change from a variable.

Leave a comment