Vue

by Dmitri Ganenco

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/popper.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<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: 100
    }
  },
  methods: {
		load: function() {
			setTimeout(() => {})
		}
	},
  computed: {
    classObject: function() {
      return {
        'bg-success': this.customerLoan.progress >= 50,
        'bg-danger': this.customerLoan.progress < 50
      }
    }
  }
})