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以前の記事は参考にしない方がよさそう。