bootstrap走动的进度条
1.页面效果:
起始位置:
aaarticlea/png;base64,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" alt="" />
单击"走"按钮后
aaarticlea/png;base64,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" alt="" width="1280" height="186" />
2.html代码:
<div>
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="" aria-valuemin="" aria-valuemax="" 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:
}
直接绑定到一个样式对象通常更好,让模板更清晰:
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)<){
this.progressStyle.width=parseInt(this.progressStyle.width)++'%';
}else{
alert("进度条已经走完");
}
}
},
data () {
return {
//进度条样式
progressStyle:{
width:'10%',
},
}
}, }
</script>
4.style
.progress {
height: 40px;
transition: 3s;
}
.progress-bar {
font-size: 16px;
line-height: 40px;
}
bootstrap走动的进度条的更多相关文章
- Bootstrap -- 缩略图、进度条、列表组、面板
Bootstrap -- 缩略图.进度条.列表组.面板 1. 缩略图 大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap ...
- bootstrap得动态进度条
Bootstrap的动态进度条: html: 创建一个modal 这里使用fade先将modal隐藏起来,然后modal里面嵌入progress 代码很简单 <div class=" ...
- Bootstrap 警告、进度条、列表组、面板
摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
- ajax异步文件上传和进度条
一.ajax异步文件上传 之前有说过在form表单内的文件上传,但是会刷新页面,下面就来实现不刷新页面的异步文件上传 <div class="uploding_div"> ...
- Bootstrap <基础二十六>进度条
Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...
- 详解Bootstrap进度条组件
在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...
- Bootstrap 进度条媒体对象和 Well 组件
一.Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
- BootStrap入门教程 (三) :可重用组件(按钮,导航,标签,徽章,排版,缩略图,提醒,进度条,杂项)
上讲回顾:Bootstrap的基础CSS(Base CSS)提供了优雅,一致的多种基础Html页面要素,包括排版,表格,表单,按钮等,能够满足前端工程师的基本要素需求. Bootstrap作为完整的前 ...
- Bootstrap进度条
前面的话 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等,通过简单.灵活的进度条,可以为当前工作流程或动作提供实时反馈.本文将详细介绍Bootstrap进度条 基本样式 Bootst ...
随机推荐
- 关于UIAlertAction如何修改sheet上的字体颜色
相信很多程序员都会遇到需求是这样的: 但是你发现无论怎么设置cancel和Destructive都无法让红色字体移动到下面取消按钮上: 其实之前一直用错,用了ios9之前的UIActionSheet这 ...
- mysql安装流程
一.配置MySQL数据库 1.解压绿色版mysql,如下图 二.安装服务 1.运行cmd(管理员版本,否则没有权限),如下图 2.运行命令mysqld –install安装服务,如下图: 如果不需要m ...
- 数字对象NSNumber
//将int类型转化成对象 ; NSNumber *numberString = [NSNumber numberWithInt:number]; //对象是可以放入数组的 NSArray *arra ...
- js Date学习
Date.parse()接收一个表示日期的字符串参数(参数错误时返回NaN),返回相应日期的毫秒数.(使用自 UTC(Coordinated Universal Time,国际协调时间)1970 年 ...
- Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- [LintCode] Sort List 链表排序
Sort a linked list in O(n log n) time using constant space complexity. Have you met this question in ...
- System.Dynamic.ExpandoObject 类型的简单使用
该类型可以实现的是动态添加属性和移除属性,有点类似 js 中对象的操作,非常灵活 static void Main(string[] args) { dynamic obj = new System. ...
- HTML基础篇之内嵌框架和表单
内嵌框架: <iframe src="http://www.baidu.com" name="d"></iframe> 网页会显示一个这 ...
- Information Management Policy(信息管理策略)的使用范例
基础知识 很多人都会定期收拾自己的书架或者抽屉,把里面过旧的资料拿走,为新的资料腾出空间来,这样既可以节省空间,而且当冗余资料过多的时候也会降低你查找的速度和效率.那么,在企业的SharePoint中 ...
- ASP.NET Core Docker部署
前言 在前面文章中,介绍了 ASP.NET Core在 macOS,Linux 上基于Nginx和Jexus的发布和部署,本篇文章主要是如何在Docker容器中运行ASP.NET Core应用程序. ...