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;}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
bootstrap,进度条
|
