有趣的bootstrap走动进度条

<div><div class="progress progress-striped active"> <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" v-bind:style="progressStyle">进度条</div></div><button type='button' v-on:click='queryEnterprise' class='btn btn-primary'>走</button></div>

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: { activeColor: 'red', fontSize: 30}

<div v-bind:style="styleObject"></div>

data: { styleObject: { color: 'red', fontSize: '13px' }}

<div v-bind:style="[styleObjectA, styleObjectB]">

data: { styleObjectA: { color: 'red'  }, styleObjectB:{ fontSize: '13px' }}

<script>export default { components:{}, props:{},  ready:function(){},  computed:{},  methods:{   queryEnterprise:function(){    if(parseInt(this.progressStyle.width)<100){     this.progressStyle.width=parseInt(this.progressStyle.width)+30+'%';    }else{     alert("进度条已经走完");    }   }  }, data () {  return {   //进度条样式    progressStyle:{     width:'10%',    },  } },}</script>

.progress { height: 40px; transition: 3s;}.progress-bar { font-size: 16px; line-height: 40px;}