Bootstrap Sample with Vue.js

by Hiroshi Obata

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<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>

JavaScript

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