有趣的bootstrap走动进度条


Posted in Javascript onDecember 01, 2016

本教程教大家制作“走动”着的bootstrap进度条,供大家参考,具体内容如下

1.页面效果:

起始位置:

有趣的bootstrap走动进度条

单击"走"按钮后

有趣的bootstrap走动进度条

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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
Aug 13 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 #Javascript
第一次接触神奇的前端框架vue.js
Dec 01 #Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
jQuery生成假加载动画效果
Dec 01 #Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 #Javascript
浅谈js键盘事件全面控制
Dec 01 #Javascript
jstree的简单实例
Dec 01 #Javascript
You might like
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
php基础教程
2015/08/26 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
PHP静态成员变量
2017/02/14 PHP
js 禁用只读文本框获得焦点时的退格键
2010/04/25 Javascript
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
2016/12/03 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
2018/08/07 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
python3.0 字典key排序
2008/12/24 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
如何用 Python 制作一个迷宫游戏
2021/02/25 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
企业负责人任命书
2014/06/05 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
教师工作总结范文2014
2014/11/10 职场文书
校友回访母校寄语
2015/02/26 职场文书
教师调动申请报告
2015/05/18 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
python使用BeautifulSoup 解析HTML
2022/04/24 Python