Vue.jsでBootstrapのProgress Barを制御するサンプル

vue.jsの勉強を兼ねて、BootstrapのProgress Barを制御するサンプルを作ってみました。

<div class="container" id="simple">

  <div class="progress progress-striped active">
    <div class="progress-bar" :style=" progressWidth">
    <span>{{ progress }}%</span>
    </div>
  </div>
  <button class="btn btn-default" v-on:click="start" type="submit">Button</button>
</div>

var app = new Vue({
  el: '#simple',
  data: {
    progress: 15,
  },
  computed: {
        progressWidth: function(){
             return "width:" + this.progress + "%";
        }
  },
  created: function(){
  },
  methods: {
    start: function() {
      this.progress = 75
    }

  }
})

ボタンをクリックするとProgress Barのゲージが15%から75%に増加します。
jsfddileでのサンプルはこちら。 http://jsfiddle.net/Hiroshi_Obata/dgxavvgj/embedded/result/

vue.jsを始めるにあたり、いくつかのサイトを参考にしたのですが、v-attrを使っていたり、v-onのイベントの書き方が違っていたりとちょっと苦労しました。v 1.0.0が出た2015/10/26以前の記事は参考にしない方がよさそう。