本教學教大家製作「走動」的bootstrap進度條，供大家參考，具體內容如下
1.頁面效果：
起始位置:
點擊"走.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:
樣式物件通常比較好，讓模板更清楚：
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'
}
}<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>3.js程式碼:
.progress {
height: 40px;
transition: 3s;
}
.progress-bar {
font-size: 16px;
line-height: 40px;
}
4.style
rrreee
