本教程教大家制作“走動”著的bootstrap進(jìn)度條，供大家參考，具體內(nèi)容如下

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">進(jìn)度條</div>
</div>
<button type=&#39;button&#39; v-on:click=&#39;queryEnterprise&#39; class=&#39;btn btn-primary&#39;>走</button>
</div>

v-bind:style="progressStyle"

綁定內(nèi)聯(lián)樣式:

a.對象語法:v-bind:style 的對象語法十分直觀——看著非常像 CSS，其實(shí)它是一個 JavaScript 對象。CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：

eg:

html:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + &#39;px&#39; }"></div>

js:

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

直接綁定到一個樣式對象通常更好，讓模板更清晰：

html:

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

js:

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

b.數(shù)組語法: v-bind:style 的數(shù)組語法可以將多個樣式對象應(yīng)用到一個元素上：

eg:

html:

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

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

c.自動添加前綴: 當(dāng) v-bind:style 使用需要廠商前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應(yīng)的前綴。

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+&#39;%&#39;;
    }else{
     alert("進(jìn)度條已經(jīng)走完");
    }
   }
  },
 data () {
  return {
   //進(jìn)度條樣式
    progressStyle:{
     width:&#39;10%&#39;,
    },
  }
 },
 
}
</script>

4.style

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

? ?

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助