有趣的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="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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。