Vue.jsでCSSクラスプロパティを変更する

Question

Vue.jsを使用していて、CSSクラスプロパティを変更したい。クラスを使用するHTMLコードは次のとおりです。

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

CSSコード：

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

そこから、Vueコンポーネントのwidthプロパティを使用してcomputedクラスプロパティを変更します。

正しい方法はどれですか？

Answer 1

v-bind:styleディレクティブを使用する必要があります。

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>