bootstrap走动的进度条

1.页面效果:

起始位置:

aaarticlea/png;base64,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" alt="" />

单击"走"按钮后

aaarticlea/png;base64,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" alt="" width="1280" height="186" />

2.html代码:

<div>
<div class="progress progress-striped active">
  <div class="progress-bar"  role="progressbar" aria-valuenow="" aria-valuemin="" aria-valuemax="" 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:
}

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

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)<){
                  this.progressStyle.width=parseInt(this.progressStyle.width)++'%';
              }else{
                  alert("进度条已经走完");
              }
          }
      },
    data () {
        return {
            //进度条样式
             progressStyle:{
                 width:'10%',
             },
        }
    },

}
</script>

4.style

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