Vue

by Dmitri Ganenco

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table id="app">
  <tr>
    <td>
      <span class="header-text">
				<div class="
				progress-bar  
				progress-bar-striped 
				active 
				progressbartextcolor" 
				id="below50percent" 
				role="progressbar" 
				aria-valuenow="25" 
				aria-valuemin="0" 
				aria-valuemax="100"
				v-bind:class='classObject'>
					{{ customerLoan.progress }}%
				</div>
			</span>
    </td>
  </tr>
</table>

Vue

new Vue({
  el: "#app",
  data: {
    customerLoan: {
			progress: 50
		}
  },
  methods: {
  	isSucceed: function(){
    	return this.customerLoan.progress > 50;
    }
  },
	computed: {
  classObject: function () {
    return {
      'bg-success': this.customerLoan.progress >= 50,
      'bg-danger': this.customerLoan.progress < 50
    }
  }
}
})