本教程教大家制作“走動”著的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:{ width:'10%', }, } },}</script>4.style
.progress { height: 40px; transition: 3s;}.progress-bar { font-size: 16px; line-height: 40px;}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
