本教程教大家制作“走动”着的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]">
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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助