Почему я должен использовать V-Bind для стиля

Question

Я только начал изучать Vue, и мне было интересно, почему я должен использовать v-bind для стиля, а не писать его регулярно в файле html / css

Answer 1

Допустим, вам нужно создать индикатор выполнения, который не является статичным.Затем вам нужно будет обновить атрибут стиля width для примера.

Для этого нам нужно программно отредактировать width элемента.Мы «не можем» сделать это простым CSS, поэтому атрибут :style пригодится.

Давайте создадим пример: 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)
    }
  }
})

Как вы видите здесь, мы привязываем атрибут данных прогресса к значению ширины на фальшивой шкале прогресса.Это простой пример, но я надеюсь, что это поможет вам увидеть его потенциал.(Вы можете добиться того же эффекта, используя тег <progress>, но это может испортить объяснение.

EDIT; Также хочу указать, что вы должны записать все свои CSS какобычно, как вы указали в своем вопросе. Тем не менее, :style используется в тех случаях, когда вы не можете нормально использовать css для. Как и в примере выше, где нам нужно css, чтобы перейти от переменной.