有趣的bootstrap走動進度條

本教學教大家製作「走動」的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=&#39;button&#39; v-on:click=&#39;queryEnterprise&#39; class=&#39;btn btn-primary&#39;>走</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 + &#39;px&#39; }"></div>

   

js:

   

樣式物件通常比較好，讓模板更清楚：

html:

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

   

js:

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

  

:

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

  in

:

:很多語法群組應用在一個元素上：

eg:

html:

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

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

   

c.自動加上前綴: 當v-bind:style 使用廠商前綴的CSS偵測並新增對應的前綴。

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("进度条已经走完");
    }
   }
  },
 data () {
  return {
   //进度条样式
    progressStyle:{
     width:&#39;10%&#39;,
    },
  }
 },
 
}
</script>

   

3.js程式碼:

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

   

4.style

rrreee