bootstrap走动的进度条

1.页面效果:

起始位置:

单击"走"按钮后

2.html代码:

<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>

v-bind:style="progressStyle"

绑定内联样式:

  a.对象语法:v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）：

eg:

html:

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

js:

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

直接绑定到一个样式对象通常更好，让模板更清晰：

html:

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

js:

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

b.数组语法:  v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：

eg:

html:

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

js:

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

c.自动添加前缀: 当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

3.js代码:

<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:{
                 '10%',
             },
        }
    },

}
</script>

4.style

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