bootstrap走动的进度条
2016-06-13 15:51
447 查看
1.页面效果:
起始位置:
单击"走"按钮后
2.html代码:
绑定内联样式:
a.对象语法:
eg:
html:
js:
直接绑定到一个样式对象通常更好,让模板更清晰:
html:
js:
b.数组语法:
eg:
html:
js:
c.自动添加前缀: 当
3.js代码:
4.style
起始位置:
单击"走"按钮后
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; }
相关文章推荐
- Bootstrap tutorial: A responsive design tutorial with Twitter Bootstrap 3
- BootStrap智能表单实战系列(十一)级联下拉的支持
- 给AspNetPager分页控件添加bootstrap样式
- BootStrap 智能表单实战系列(十)自动完成组件的支持
- BootStrap智能表单实战系列(九)表单图片上传的支持
- Bootstrap下拉菜单插件
- Bootstrap模态框插件
- BootStrap智能表单实战系列(八)表单配置json详解
- BootStrap智能表单实战系列(七)验证的支持
- bootstrap-datepicker 与bootstrapValidator同时使用时,选择日期后,无法正常触发校验
- BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
- BootStrap 智能表单实战系列(五) 表单依赖插件处理
- springMVC + mybatis + bootstrap 框架学习
- BootStrap智能表单实战系列(四)表单布局介绍
- [转]ASP.NET MVC4+BootStrap 实战(一)
- BootStrap智能表单实战系列(三)分块表单配置详解
- bootstrap导航条
- BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
- BootStrap智能表单demo示例详解
- [转]Bootstrap 3.0.0 with ASP.NET Web Forms – Step by Step – Without NuGet Package